HTML5中的简单拖放
HTML5中的简单拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
为了让元素可拖动，需要使用 HTML5 draggable 属性，将其值设为true。链接，文本和图片默认是可拖动的（文本选中状态下可拖动，链接和图片任何情况下都可拖动），不需要 draggable 属性。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ border: 1px solid red; height: 300px; } </style> </head> <body> <div id="dropBlock"></div> <img src="../image/2page-img1.jpg" id="imgs"/><br/> </body> <script> var imgs=document.getElementById("imgs"); imgs.ondragstart=function(e){ e.dataTransfer.setData("Text", e.target.id); } var div=document.getElementById("dropBlock"); div.ondragover=function(e){ e.preventDefault(); } div.ondrop=function(e){ e.preventDefault(); var data= e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)) } </script> </html>
拖动什么？
首先为被拖动的图片绑定一个ondragstart事件，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
e.dataTransfer.setData("Text", e.target.id);
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("imgs")。
放到何处？
为投区(id为dropBlock)绑定了一个ondragover事件，它规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
进行放置
为投区(id为dropBlock)绑定了一个ondrop事件，当放置被拖数据时，该事件会发生。
该事件会执行下述代码：
div.ondrop=function(e){
e.preventDefault();
var data= e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data))
}
代码解释：
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("imgs")
- 把被拖元素追加到放置元素（目标元素）中
