原生拖放

 1.拖放的元素:ondragstart,ondrag,ondragend,只有图片，文字，超链接默认是支持拖放，一个元素是否支持拖放取决于draggable。

图像和链接的 draggable 属性自动被设置成了 true，而其他元素这个属性的默认值都是 false。

 2.拖放的目标:ondragenter,ondragover,ondragleave,ondrop,一般元素默认都不支持放，如果要支持放，重写ondrageenter,ondragover,FF还需要重写ondrop,在这些事件函数

中阻止默认行为

dataTransfer 对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。 

dataTransfer 对象有两个主要方法： getData()和 setData()。不难想象， getData()可以取
得由 setData()保存的值。 setData()方法的第一个参数，也是 getData()方法唯一的一个参数，是
一个字符串，表示保存的数据类型，取值为"text"或"URL" 。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .drag{
 8                 width: 50px;
 9                 height: 50px;
10                 position: absolute;
11                 background: red;
12             }
13             .drop{
14                 width: 100px;
15                 height: 100px;
16                 position: fixed;
17                 bottom: 50px;
18                 right: 50px;
19                 border: 1px solid black;
20             }
21             .dotted-border{
22                 border: 1px dotted black;
23             }
24         </style>
25     </head>
26     <body>
27         <div class="drag" draggable="true" id='box'></div>
28         <div class="drop"></div>
29         <script src="js/utils.js" type="text/javascript"></script>
30         <script type="text/javascript">
31             /*
32              * 1.拖放的元素:ondragstart,ondrag,ondragend,只有图片，文字，超链接默认是支持拖放，一个元素是否支持拖放取决于dragable
33              * 2.拖放的目标:ondragenter,ondragover,ondragleave,ondrop,一般元素默认都不支持放，如果要支持放，重写ondrageenter,ondragover,FF还需要重写ondrop,在这些事件函数
34              * 中阻止默认行为
35              * 3.
36              */
37             var oDrag=document.querySelector(".drag");
38             var oDrop=document.querySelector(".drop");
39             //拖动元素时需要执行的
40             oDrag.ondragstart=function(){
41                 var event=getEvent();
42                 this.classList.add('dotted-border');
43                 event.dataTransfer.setData('id','box');
44             }
45             oDrag.ondrag=function(){
46                 
47             }
48             oDrag.ondragend=function(){
49                 
50             }
51             //将元素放到某个特定位置时
52             oDrop.ondragenter=function(){
53                 var event=getEvent();
54                 preventDefault(event);
55             }
56             oDrop.ondragover=function(){
57                 var event=getEvent();
58                 preventDefault(event);
59             }
60             oDrop.ondragleave=function(){
61                 
62             }
63             oDrop.ondrop=function(){
64                 var event=getEvent();
65                 preventDefault(event);
66                 
67                 //把拖放的元素放到这里
68                 var id=event.dataTransfer.getData('id');
69                 var oBox=document.getElementById(id);
70                 var clone=oBox.cloneNode(true);
71                 this.appendChild(clone);
72             }
73         </script>
74     </body>
75 </html>
View Code

 

posted @ 2017-10-12 21:44  把酒祝东风19  阅读(137)  评论(0)    收藏  举报