拖拽事件：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ width: 200px; height: 200px; background-color: green; } </style> </head> <body> <div class="box" draggable="true"></div> <script> var box=document.querySelector('.box'); // 绑定拖拽事件 // 拖拽开始 box.ondragstart=function(){ console.log('拖拽开始...'); } // 拖拽结束 box.ondragend=function(){ console.log('拖拽结束...'); } // 拖拽离开 :鼠标拖拽时离开被拖拽的元素是触发 box.ondragleave=function(){ console.log('拖拽离开了....'); } box.ondrag=function(){ console.log('拖拽....'); } </script> </body> </html>
拖拽案例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .one{ width: 400px; height: 400px; border: 1px solid #000; } .one>div,.two>div{ width: 98px; height: 98px; border: 1px solid #000; border-radius: 50%; background-color: red; float: left; text-align: center; line-height: 98px; } .two{ width: 400px; height: 400px; border: 1px solid #000; position: absolute; left:600px; top:200px; } </style> </head> <body> <div class="one"> <div draggable="true">1</div> <div draggable="true">2</div> <div draggable="true">3</div> <div draggable="true">4</div> <div draggable="true">5</div> <div draggable="true">6</div> <div draggable="true">7</div> <div draggable="true">8</div> </div> <div class="two"></div> <script> var boxs=document.querySelectorAll('.one div'); // 临时的盒子 用于存放当前拖拽的元素 var two=document.querySelector('.two'); var temp=null; // 给8个小盒子分别绑定拖拽事件 for(var i=0;i<boxs.length;i++){ boxs[i].ondragstart=function(){ // 保持当前拖拽的元素 temp=this; console.log(temp); } boxs[i].ondragend=function(){ // 当拖拽结束 ，清空temp temp=null; console.log(temp); } } // 目标元素的拖拽事件 two.ondragover=function(e){ // 阻止拖拽的默认行为 e.preventDefault(); } // 当在目标元素上松开鼠标是触发 two.ondrop=function(){ // 将拖拽的元素追加到 two里面来 this.appendChild(temp); } </script> </body> </html>