time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > html5指南--3.拖拽功能的实现

html5指南--3.拖拽功能的实现

时间:2012-09-12 00:03 点击:2020次 字体:[ ]




   本文的内容是关于在html5中如何实现html元素拖拽功能。在html5之前要实现拖拽,需要借助js,现在html5内部就支持了拖拽的功能,但是要实现稍微复杂的功能还是少不了js的帮忙。下面我们看几个例子。

  1.创建拖拽对象

  我们可以通过draggable属性告诉浏览器,哪些元素需要实现拖拽功能。draggable有三个值:true:元素可以被拖拽;false:元素不能被拖拽;auto:浏览器自己判断元素是否能被拖拽。

  系统默认值是auto,但auto情况下浏览器对不同元素拖拽功能的支持是不一样,如:支持img对象,不支持div对象。所以,如果需要拖拽一个元素,最好还是把draggale设置为true。下面我们看一个例子:

 

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>Example</title> 
  5.     <style> 
  6.         #src > * 
  7.         { 
  8.             float: left; 
  9.         } 
  10.         #target, #src > img 
  11.         { 
  12.             border: thin solid black; 
  13.             padding: 2px; 
  14.             margin: 4px; 
  15.         } 
  16.         #target 
  17.         { 
  18.             height: 123px; 
  19.             width: 220px; 
  20.             text-align: center; 
  21.             display: table; 
  22.         } 
  23.         #target > p 
  24.         { 
  25.             display: table-cell; 
  26.             vertical-align: middle; 
  27.         } 
  28.         #target > img 
  29.         { 
  30.             margin: 1px; 
  31.         } 
  32.     </style> 
  33. </head> 
  34. <body> 
  35.     <div id="src"> 
  36.         <img draggable="true" id="car1" src="img/1.jpg" alt="car1" /> 
  37.         <img draggable="true" id="car2" src="img/2.jpg" alt="car2" /> 
  38.         <img draggable="true" id="car3" src="img/3.jpg" alt="car3" /> 
  39.         <div id="target"> 
  40.             <p id="msg"> 
  41.                 drop here</p> 
  42.         </div> 
  43.     </div> 
  44.     <script> 
  45.         var src = document.getElementById("src"); 
  46.         var target = document.getElementById("target"); 
  47.     </script> 
  48. </body> 
  49. </html> 

运行效果:

html5指南--3.拖拽功能的实现_www.fengfly.com

 



本文地址 : http://www.fengfly.com/plus/view-209209-1.html
标签: HTML5
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: