HTML5拖拽的简单实例

拖拽相关属性

Draggable属性是htML5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放,draggable有三个值，true表示可以拖放，false表示不可以被拖放，auto表示使用浏览器的默认值

1. ul>      
2.     li id="ITem1" draggable="true"> 列表1/li>   
3.     li id="item2" draggable="true"> 列表2/li>   
4.     li id="item3" draggable="true"> 列表3/li>   
5.     li id="item4" draggable="true"> 列表4/li>   
6.     li id="item5" draggable="true"> 列表5/li>   
7.     li id="item6" draggable="true"> 列表6/li>   
8. /ul>   

拖拽相关的事件

ondragstart：此事件在用户开始拖动元素或选择文本时触发 ondrag:元素正在拖动时触发 ondragend:用户完成元素拖放时触发 ondragleave:当被鼠标拖动的对象离开其容器范围时触发 ondragover:当某个被拖动的对象在另一对象容器范围内拖动时触发此事件，此事件发生在目标元素身上 ondrop:在一个拖动过程中，释放鼠标时触发，此事件作用在目标元素身上

datatransfer 对象相关方法

setData(format,data):添加自定义数据格式 getData(format):获取自定义的数据格式clearData([format]):清除自定义的数据格式及数据

Event.preventDefault()

此方法是阻止事件的默认行为，在ondragover中一定要执行PReventDefault(),否则ondrop事件不会被触发

实现案例：

XML/HTML Code复制内容到剪贴板

1. !DOCTYPE html>      
2. html>      
3.     head>   
4.         meta charset="UTF-8">   
5.         title> /title>   
6.         style type="text/css">   
7.             .main{   
8.                 width: 800px;   
9.                 /*border: 1px solid #ccc; */   
10.                 height: 400px;   
11.                 margin:0 auto;   
12.             }   
13.             .left{   
14.                 float: left;   
15.                 width: 25%;   
16.                 background-color: #666;   
17.                 height: 370px;   
18.                 text-align: center;   
19.                 color: black;   
20.                 padding-top:30px ;   
21.                 font-Size: 110px;   
22.             }   
23.             .right{   
24.                 float: right;   
25.                 width: 69%;   
26.             }   
27.             .right ul,.right li{   
28.                margin: 0;   
29.                padding: 0;   
30.             }   
31.             .right li{   
32.                 list-style: none;   
33.                 border: 2px dashed  #666;   
34.                 background-color: #ddd;   
35.                 height: 60px;   
36.                 margin-top: 3px;   
37.                 text-indent: 30px;   
38.                 line-height: 60px;   
39.             }   
40.             .right li:hover{   
41.                 background-color: #ccc;   
42.             }   
43.             #message{   
44.   
45.                 width: 800px;   
46.                 text-align: center;   
47.                 border: 1px solid black;   
48.                 margin: 20px auto;   
49.                 font-size:28px;   
50.             }   
51.         /style>   
52.         script type="text/javascript">   
53.             window.onload = function(){   
54.                 VAR aLi = document.getelementsbytagname('li');   
55.                 var oLeft = document.getElementsByclassname('left')[0];   
56.                 var oMessage = document.getElementById('message');   
57.   
58.                 for(var i=0; iaLi.length; i++){   
59.                     aLi[i].index = i+1;   
60.                     aLi[i].ondragstart = function(ev){   
61.                                                 //事件对象ev   
62.                         var evev = ev || event;   
63.   
64.                         ev.dataTransfer.setData("Text",this.id);   
65.                     }   
66.   
67.                 }   
68.                 oLeft.ondrop = function(ev){   
69.   
70.                     var evev = ev || event;   
71.                     var data = ev.dataTransfer.getData("Text");   
72.                     var num = document.getElementById(data).index;   
73.                      document.getElementById(data).remove();   
74.   
75.                     oMessage.innerHTML = "列表"+num+"被放进了垃圾箱";   
76.   
77.                     this.style.color = "black";   
78.   
79.                     }   
80.                 oLeft.ondragover = function(ev){   
81.                     var evev = ev || event;   
82.                     ev.preventDefault();   
83.                 }   
84.                 oLeft.ondragenter = function(){   
85.                     this.style.color = "#fff";   
86.                 }   
87.             }   
88.         /script>   
89.     /head>   
90.     body>   
91.         div class="main">   
92.             div class="left"> 垃圾箱/div>   
93.             div class="right">   
94.                 ul>   
95.                     li id="item1" draggable="true"> 列表1/li>   
96.                     li id="item2" draggable="true"> 列表2/li>   
97.                     li id="item3" draggable="true"> 列表3/li>   
98.                     li id="item4" draggable="true"> 列表4/li>   
99.                     li id="item5" draggable="true"> 列表5/li>   
100.                     li id="item6" draggable="true"> 列表6/li>   
101.                 /ul>   
102.             /div>   
103.             div style="clear: both; "> /div>   
104.   
105.   
106.         /div>   
107.         div id="message"> 拖到垃圾箱删除列表/div>   
108.     /body>   
109. /html>     

以上这篇HTML5拖拽的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！