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 200px; 13 height: 200px; 14 border: 1px solid red; 15 position: relative; 16 margin-left:20px; 17 float: left; 18 } 19 .div2{ 20 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 200px; 13 height: 200px; 14 border: 1px solid red; 15 position: relative; 16 margin-left:20px; 17 float: left; 18 } 19 .div2{ 20 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>