突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
启用拖拽 draggable属性
要使一个元素支持拖动，只需将其draggable属性设置为true。
<img draggable="true" />
拖动中数据的传递
在拖动过程中，常常需要传递数据来完成转换，这主要通过dataTransfer对象实现。
1、方法成员：
setData(format, data): 将数据赋值给dataTransfer对象。format指定数据类型（如“Text”或“URL”），data是实际数据，函数返回布尔值，表示操作是否成功。
getData(format): 获取存储在dataTransfer中的数据。format与setData中的相同。
clearData(format): 移除指定类型的数据。
2、属性成员：
effectAllowed: 设置或获取数据源元素可以执行的操作，如“copy”、“move”等。
dropEffect: 设置或获取目标元素上允许的操作及鼠标形状。
files: 返回拖动文件的列表。
types: 发送的数据类型列表。
拖动中触发的事件
一次拖拽操作会触发以下事件：
1、dragstart: 开始拖动时触发，传入被拖动元素。
2、drag: 拖动时触发，传入被拖动元素。
3、dragenter: 拖动进入目标元素时触发，传入目标元素。
4、dragover: 在目标元素上移动时触发，传入目标元素。
5、dragleave: 离开目标元素时触发，传入目标元素。
6、drop: 放置数据时触发，传入目标元素。
7、dragend: 拖动结束时触发，传入被拖动元素。
示例代码
以下是一个简单的拖拽示例：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev){
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="image.png" draggable="true" ondragstart="drag(event)">
</body>
</html>
FAQs
Q1: 如何禁止元素的拖动？
A1: 可以通过设置effectAllowed为"none"来禁止拖动，还需要将window.event.returnValue设置为false以隐藏鼠标形状。
Q2: 如何在拖动过程中传递文本数据？
A2: 使用dataTransfer对象的setData方法在ondragstart事件中设置数据，然后在目标元素的ondrop事件中使用getData方法获取数据。