dragstart：拖拽开始时在被拖拽元素上触发此事件
drag：拖拽过程中被拖拽的元素会持续不断地发drag事件。
dragend：鼠标在拖放目标上释放时，在拖搜元素上触发，将元素从浏览器拖放到操作系统时不会触发此事件。
dragenter：拖拽鼠标进入元素时在该元素上触发，用于给拖放元素设置视觉反馈，如高亮
dragover：拖拽时鼠标在目标元素上移动时触发
dragleave：拖拽时鼠标移出目标元素时在目标元素上触发
drop：当拖拽元素在目标元素上同时鼠标放开时触发事件息标在拖放目标上释放时在拖放目标上触发此时监听器需要收集数据并且执行所需操作。如果是从操作系统拖放文件到浏览器，需要取消浏览器默认行为。
下面是举例：
测试各个元素的拖拽使用，观察如何执行
<div><img src="./爱宠.webp" alt="" draggable="true"></div> <span></span> <script> const imgs = document.querySelector('img') const spans = document.querySelector('span') // 拖拽的元素 imgs.addEventListener('dragstart',dragstart) function dragstart(){ console.log(`dragstart 执行了~`); } imgs.addEventListener('drag',drag) function drag(){ console.log('drag 执行了') } imgs.addEventListener('dragend',dragend) function dragend(){ console.log('dragend 执行了') } </script>
下面是一个小例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; box-sizing: border-box; } html,body{ height: 100%; } body { background-color: lightblue; display: flex; justify-content: center; align-items: center; } .container { width: 200px; height: 200px; border: 8px solid; margin-left: 20px; } .content { width: 184px;/* width: 100px; */ height: 184px;/* height: 100px; */ background: url(./flower.jpg) center/cover; } .hide { display: none; } .active { border: 8px dashed #ccc; background-color: lightgoldenrodyellow; } </style> </head> <body> <div class="container"> <div class="content" draggable="true"></div> </div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <script> //拖拽的元素 const content = document.querySelector('.content') content.addEventListener('dragstart', dragstart) function dragstart(){ setTimeout(() =>{ //setTimeout可以让元素不要消失得这么快 this.classList.add('hide') //当拖拽开始时隐藏该元素 }) } content.addEventListener('dragend',dragend) function dragend(){ this.classList.remove('hide') //当拖拽结束时显示该元素 } //目标元素 const container = document.querySelectorAll('.container') container.forEach((item)=>{ item.addEventListener('dragleave',dragleave) item.addEventListener('dragenter',dragenter) item.addEventListener('dragover',dragover) item.addEventListener('drop',drop) }) function dragleave() { this.classList.remove('active') //当元素移出该区域时，取消高亮 } function dragenter() { this.classList.add('active') //当元素移动到该区域上时高亮显示 } //drop事件要和dragover事件一起使用才有效果，注意阻止事件 function dragover(e){ e.preventDefault(); } function drop(e){ //当拖拽元素在目标元素上同时鼠标放开时，需要将拖拽元素放到这个容器中 e.preventDefault(); this.append(content) //将拖拽元素放到这个容器中 } </script> </body> </html>
效果如下：
初始时：
拖拽时：
松开时：
以上案例仅供参考
