HTML5新增拖放的API。
关于拖拽事件
| 事件 | 事件描述 |
|---|---|
| ondragstart （源元素） | 开始拖动时触发 |
| ondrag （源元素） | 拖动过程中触发 |
| ondragend（源元素） | 结束拖动时触发 |
| ondragenter （目标元素） | 源元素进入目标元素之内时触发 |
| ondragover （目标元素） | 源元素在目标元素区域内拖动时触发 |
| ondragleave （目标元素） | 源元素离开目标元素时触发 |
| ondrop （目标元素） | 源元素放入目标元素 中时触发 |
ps:
1.源元素指拖拽的元素，目标元素指要放入的元素。
2.注意默认可拖动元素如下图像标签img，带href属性的超链接a，及鼠标选中的文本，其他元素都不可以拖动，若要变为可以拖动必须设置draggable=“true”属性。draggable有3种属性，如下
- true:可以拖动
- false:禁止拖动
- auto：根据浏览器决定是否拖动
<div id="source" draggable="true" style="width:80px;height:60px;
border:1px solid black;">拖动我</div>
3.拖拽过程中注意默认行为。如a超链接等。默认元素都是不接受拖动的元素，若要想变为拖动元素，需要阻止浏览器默认行为。如下设置
document.ondragover=function(e){
//取消事件默认行为
return false;
}
简单例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container" style="width:400px;height:400px;border:1px solid red;">
目标元素</div>
<div id="test" draggable="true" class="test"
style="text-align:center;width:100px;line-height:100px;height:100px;border-radius:50px;background:black;color:white">
源元素
</div>
<script>
var test = document.getElementById('test'); //源元素：拖拽元素
var container = document.getElementById('container') //目标元素
test.ondragstart = function (e) {
//拖动元素携带数据
e.dataTransfer.setData("name", "自我学习中")
}
//container元素允许拖放
container.ondragover = function (e) {
return false;//取消默认行为
}
container.ondrop = function (e) {
test.style.position = "absolute";
test.style.left = (e.pageX - 50) + 'px';
test.style.top = (e.pageY - 50) + 'px';
return false；//取消默认行为
}
</script>
</body>
</html>
需要注意的是，当源元素拖放到目标元素中释放后，火狐Firefox默认会打开新页面，而Chrome谷歌则不作任何默认操作。不同浏览器对拖拽默认动作不一样，所以需要在ondrop取消浏览器默认行为。
关于拖拽的属性DataTransfer对象
| 属性 | 作用 |
|---|---|
| dropEffect | 设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为“null”、“copy”、“link”和“move”四值之一 |
| effectAllowed | 设置或返回被拖动元素允许发生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized" |
| items | 返回DataTransferItems对象，该对象表示拖动数据 |
| types | 返回DOMStringList对象，该对象包括存入DataTransfer中数据所有类型 |
| setDragImage(element,x,y) | 设置拖拽自定义的图标。element：自定义图标，x:图标与鼠标在水平方向距离，y:垂直方向距离 |
| addElement(element) | 添加自定义图标 |
| getData(formate) | 获取format格式数据 |
| setData(formate,data) | 设置format格式数据,formate:键值， |
| clearData([formate]) | 清空f指定的format |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test" class="test" style="border:1px solid red;background:yellow">
<span draggable="true" ondragstart="dsHandle(event)">测试1</span>
<span draggable="true" ondragstart="dsHandle(event)">测试2</span>
</div>
<div id="testDiv" style="border:1px solid red;width:400px;height: 300px;"></div>
<div id="gab" style="border:1px solid red;width:100px;height: 100px;">垃圾桶</div>
<script>
var testDiv = document.getElementById('testDiv');
var gabDiv = document.getElementById('gab');
var dsHandle = function (e) {
//设置拖拽时自定义图标
let imgs = document.createElement("img");
imgs.src = "../my.gif";
e.dataTransfer.setDragImage(imgs, 0, 0);
//拖拽时携带数据
e.dataTransfer.setData("text/plain", "<item>" + e.target.innerHTML)
}
testDiv.ondrop = function (e) {
//阻止浏览器默认行为
e.preventDefault();
var text = e.dataTransfer.getData("text/plain");
//若以<item>开头
if (text.indexOf("<item>") == 0) {
var newEle = document.createElement("div");
//生成新的Id
newEle.id = new Date().getUTCMilliseconds();
newEle.innerHTML = text.substring(6);
newEle.draggable = "true";
//开始拖动时触发，销毁使用
newEle.ondragstart = function (e) {
e.dataTransfer.setData("text/plain", "<remove>" + newEle.id);
}
testDiv.appendChild(newEle);
}
}
gabDiv.ondrop = function (e) {
var gabText = e.dataTransfer.getData("text/plain");
if (gabText.indexOf("<remove>") == 0) {
var target = document.getElementById(gabText.substring(8));
testDiv.removeChild(target)
}
}
document.ondragover = function (e) {
return false;
}
document.ondrop = function (e) {
return false;
}
</script>
</body>
</html>