HTML5 拖放效果
概述
拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
实例
如下是实现从左侧容器中拖拽图片到右侧的容器：
实现方法：
<!-- 以下代码实现图片可以从第一个容器拖放到第二个容器 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖放效果</title>
<style type="text/css">
#div1, #div2 {
float:left;
width:100px;
height:35px;
margin:10px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1">
<img src="/images/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
具体操作步骤
-
将被拖动的元素设置为拖放——
属性draggable<img draggable="true"> -
拖动开始——
事件ondragstart&setData(类型, 值)// 前提：给被拖动的元素绑定监听事件<div οndragstart="drag(event)"></div> // 注意：一定是给被拖动的元素加 function drag(event){ event.dataTransfer.setData("Text", event.target.id) // 这里无法存储数据本身，所以只能通过存储 id 便于后面查找 } -
放到何处——
事件ondragover默认地，无法将数据/元素放置到本元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
// 前提：给目标元素绑定监听事件<div οndragοver="allowDrop(event)"></div> // 注意：这里是给目标元素，比如说要把 A 拖放到 B 中，那么这个就添加给 B function allowDrop(event){ event.preventDefault(); //取消默认的不允许放置 } -
进行放置——
事件ondrag// 这里也是添加给目标元素 function drop(event){ event.preventDefault(); var data=event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); }- 调用
preventDefault()来避免浏览器对数据的默认处理（drop事件的默认行为是以链接形式打开） - 通过
dataTransfer.getData("Text")方法获得被拖的数据。该方法将返回在setData()方法中设置为相同类型的任何数据。 - 被拖数据是被拖元素的
id ("drag1") - 把被拖元素追加到放置元素（目标元素）中
- 调用
综合实例
实现一张图片在两个容器中相互拖放，效果如图：
代码如下：
<!-- 以下代码实现一张图片在两个容器中相互拖放，与开头的代码相比，只需给两个容器都注册好可以放置的事件即可 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖放效果</title>
<style type="text/css">
#div1,
#div2 {
float: left;
width: 100px;
height: 75px;
margin: 10px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/rank.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="70">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>