一、定义
- 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
- Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。Safari 5.1.2不支持拖动
二、使用
-
设置元素为可拖放：为了使元素可拖动，把 draggable 属性设置为 true
-
拖动什么 ：ondragstart 和 setData( )，其中ondragstart 它规定了被拖动的数据。setData() 方法设置被拖数据的数据类型和值。
-
放到何处 ：ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法
-
进行放置 ：ondrop 当放置被拖数据时，会发生 drop 事件。
三、案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5拖放</title> <style> .box{ width: 150px; height: 150px; background-color: red; position: absolute; top: 150px; left: 20%; } .container{ width: 300px; height: 300px; background-color: pink; position: absolute; top: 100px; left: 50%; } </style> </head> <body> <div class="box" draggable="true"></div> <div class="container"></div> <script> var box=document.querySelector(".box"); var container=document.querySelector(".container"); // 整个拖拽都会执行 box.addEventListener("drag",function(e){ console.log('drag'); }); // 拖拽的点离开当前盒子 box.addEventListener('dragleave',function(){ console.log('dragleave'); }); //拖拽开始 box.addEventListener('dragstart',function(){ console.log('dragstart'); }); // 拖拽结束 box.addEventListener('dragend',function(ev){ this.style.backgroundColor=''; console.log('dragend'); }) // 在目标元素松上移动 container.addEventListener('dragover',function(e){ this.style.backgroundColor='yellow'; console.log('目标drogover'); e.preventDefault(); }); // 在目标元素上松开 container.addEventListener('drop',function(e){ this.style.backgroundColor='black'; console.log('目标drop'); e.preventDefault(); }); // 在目标元素上离开 container.addEventListener('dragleave',function(e){ this.style.backgroundColor=''; console.log('目标drogleave'); e.preventDefault(); }); </script> </body> </html>
