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")
- 把被拖元素追加到放置元素（目标元素）中
时间： 2024-10-10 09:42:50