拖拽事件
-
ondrag 拖拽事件
-
ondragstart 拖拽开始
-
ondragend 拖拽结束
-
ondragenter 拖拽进入
-
ondragover 拖拽悬浮 // 阻止它的默认事件 return false 或者 e.preventDefault();
-
ondragleave 拖拽离开
-
ondrop 拖拽丢弃， 其他图像拖拽的时候丢弃到当前元素上。
注意事项，ondragover的默认行为会阻止ondrop事件的触发，所以想触发ondrop事件必须阻止ondragover的默认事件
拖拽时存储数据：e.dataTransfer.setData(key, value);
拖拽时读取数据: e.dataTransfer.getData(key);
拖拽实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <img class="img" src="imgs/1.png" alt=""> <img class="img" src="imgs/2.png" alt=""> <img class="img" src="imgs/3.png" alt=""> <img class="img" src="imgs/thanks.png" alt=""> <img id="trash" src="imgs/trash.png" alt=""> <script> // 设置信号量 var idx = null; // 获得元素对象 var trash = document.querySelector('#trash'); var imgs = document.querySelectorAll('.img'); // 绑定事件 imgs.forEach(function(value, index) { value.ondragstart = function(e) { idx = index; console.log(idx); e.dataTransfer.setData('idx', index); } }); // 绑定拖拽悬浮事件 trash.ondragover = function() { // 阻止默认行为 return false; }; // 绑定拖拽丢弃事件 trash.ondrop = function(e) { console.log(e.dataTransfer.getData('idx')); // 从dom中删除对象的元素 document.body.removeChild(imgs[idx]); }; </script> </body> </html>第二种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="./images/1.png" alt="" id="drop1"> <img src="./images/2.png" alt="" id="drop2"> <img src="./images/3.png" alt="" id="drop3"> <img src="./images/thanks.png" alt="" id="drop4"> <img src="./images/trash.png" alt="" id="trash"> <script> //将页面中的图片拖到垃圾桶中丢弃 var drops = [].slice.apply(document.getElementsByTagName("img")); drops.pop(); var trash = document.getElementById("trash"); // 遍历 // drops.forEach(function(value,index,array){ // // console.log(value,index,array) // }); drops.forEach(function(value){ value.ondragstart = function(e){ e.dataTransfer.setData('id',this.id); } }); //垃圾桶丢弃事件 trash.ondragover = function(e){ e.preventDefault(); } trash.ondrop = function(e){ var id = e.dataTransfer.getData("id"); console.log("drop...",id, e.dataTransfer); if(id){ var dropELem = document.getElementById(id); dropELem.remove(); } } </script> </body> </html>