1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .div1{
12 width: 200px;
13 height: 200px;
14 border: 1px solid red;
15 position: relative;
16 margin-left:20px;
17 float: left;
18 }
19 .div2{
20 width: 200px;
21 height: 200px;
22 border: 1px solid blue;
23 position: relative;
24 margin-left:20px;
25 float: left;
26 }
27 p{
28 background-color: orange;
29 margin-top: 5px;
30 }
31 </style>
32 </head>
33 <body>
34 <div class="div1" id="div1">
35 <p id="pe" draggable="true">试着把我拖过去</p>
36 <p id="pe2" draggable="true">试着把我也拖过去吧！！！</p>
37 </div>
38 <div class="div2" id="div2"></div>
39 <script>
40 /*拖拽事件
41 * 1.针对于“被拖拽元素”的事件
42 * ondragstart:开始拖拽时触发，一次拖拽只会触发一次 touchstart
43 * ondrag:拖拽过程中(没有松开鼠标)持续触发 touchmove
44 * ondragleave:拖拽元素离开原始的范围，它的参照是当前鼠标拖拽点，一次拖拽只会触发一次
45 * ondragend:结束拖拽时触发。一次拖拽只会触发一次 touchend
46 *
47 * 2.针对于目标元素的事件
48 * ondragenter:当被拖拽元素进入到目标元素时触发
49 * ondragover:当被拖拽元素在目标元素上方时持续触发
50 * ondragleave:当被拖拽元素离开目标元素时触发
51 * ondrop:当被拖拽元素在目标元素上方时松开鼠标时触发*/
52
53 /*隆重介绍拖拽事件的核心：事件源参数*/
54
55 var pe = document.querySelector('#pe');
56 var div2 = document.querySelector('#div2');
57
58 pe.ondragstart = function (e) {
59 // console.log('开始拖拽');
60 /*e.target:当前真正响应事件的对象*/
61 e.target.parentNode.style.borderWidth = '10px';
62 }
63 pe.ondrag = function (e) {
64 // console.log('拖拽过程中');
65 }
66 pe.ondragleave = function (e) {
67 // console.log('拖拽元素中鼠标离开被拖拽的区域');
68 }
69 pe.ondragend = function (e) {
70 // console.log('拖拽结束');
71 e.target.parentNode.style.borderWidth = '1px';
72 }
73
74
75
76 div2.ondragenter = function (e) {
77 console.log('拖拽进入div2区域');
78 }
79 div2.ondragover = function (e) {
80 /*默认情况下，一个元素并不允许将其它的元素挺拖入到这个元素内部，它会阻止你这样的操作，如果想实现拖拽操作，就必须在over事件中阻止它的默认行为*/
81 e.preventDefault();
82 console.log('拖拽进入div2上方');
83 }
84 div2.ondragleave = function (e) {
85 console.log('拖拽离开div2区域');
86 }
87 div2.ondrop = function (e) {
88 div2.appendChild(pe);
89 console.log('拖拽进入div2上方并松开鼠标');
90 }
91
92
93
94 </script>
95 </body>
96 </html>
针对所有元素：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .div1{
12 width: 200px;
13 height: 200px;
14 border: 1px solid red;
15 position: relative;
16 margin-left:20px;
17 float: left;
18 }
19 .div2{
20 width: 200px;
21 height: 200px;
22 border: 1px solid blue;
23 position: relative;
24 margin-left:20px;
25 float: left;
26 }
27 p{
28 background-color: orange;
29 margin-top: 5px;
30 }
31 </style>
32 </head>
33 <body>
34 <div class="div1" id="div1">
35 <p id="pe" draggable="true">试着把我拖过去</p>
36 <p id="pe2" draggable="true">试着把我也拖过去吧！！！</p>
37 </div>
38 <div class="div2" id="div2"></div>
39 <script>
40 /*拖拽事件
41 * 1.针对于“被拖拽元素”的事件
42 * ondragstart:开始拖拽时触发，一次拖拽只会触发一次 touchstart
43 * ondrag:拖拽过程中(没有松开鼠标)持续触发 touchmove
44 * ondragleave:拖拽元素离开原始的范围，它的参照是当前鼠标拖拽点，一次拖拽只会触发一次
45 * ondragend:结束拖拽时触发。一次拖拽只会触发一次 touchend
46 *
47 * 2.针对于目标元素的事件
48 * ondragenter:当被拖拽元素进入到目标元素时触发
49 * ondragover:当被拖拽元素在目标元素上方时持续触发
50 * ondragleave:当被拖拽元素离开目标元素时触发
51 * ondrop:当被拖拽元素在目标元素上方时松开鼠标时触发*/
52
53 /*隆重介绍拖拽事件的核心：事件源参数*/
54
55
56
57 var obj = null;
58 document.ondragstart = function (e) {
59 // console.log('开始拖拽');
60 /*e.target:当前真正响应事件的对象*/
61 // e.target.parentNode.style.borderWidth = '10px';
62 obj = e.target;
63
64 //通过dataTransfer来传递数据
65 /*你可以简单的理解为键值对,值必须是字符串
66 * format:text/html | text/plain | Text*/
67 //e.dataTransfer.setData("text/html", e.target.id);
68 /*if(navigator.userAgent.indexOf("MSIE")){
69
70 }*/
71
72 }
73 document.ondrag = function (e) {
74 // console.log('拖拽过程中');
75 }
76 document.ondragleave = function (e) {
77 // console.log('拖拽元素中鼠标离开被拖拽的区域');
78 }
79 document.ondragend = function (e) {
80 // console.log('拖拽结束');
81 e.target.parentNode.style.borderWidth = '1px';
82 }
83
84
85
86 document.ondragenter = function (e) {
87 console.log('拖拽进入div2区域');
88 }
89 document.ondragover = function (e) {
90 /*默认情况下，一个元素并不允许将其它的元素挺拖入到这个元素内部，它会阻止你这样的操作，如果想实现拖拽操作，就必须在over事件中阻止它的默认行为*/
91 e.preventDefault();
92 console.log('拖拽进入div2上方');
93 }
94 document.ondragleave = function (e) {
95 console.log('拖拽离开div2区域');
96 }
97 document.ondrop = function (e) {
98 e.target.appendChild(obj);
99 //var id = e.dataTransfer.getData("text/html");
100 //e.target.appendChild(document.getElementById(id));
101 console.log('拖拽进入div2上方并松开鼠标');
102 }
103
104
105
106 </script>
107 </body>
108 </html>
