共计 1735 个字符，预计需要花费 5 分钟才能阅读完成。
H5 拖拽事件(知识点主要来源于 HTML 5 拖放)
其实打算出实战代码的，想想好像可以插多一个拖曳扫盲贴，在 PC 上传文件也经常能用到的，先来看看有关知识点。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。先看看兼容性如何
移动端全线飘红我可以理解的，毕竟不是主要应用交互，
首先，为了使元素可拖动，把 draggable 属性设置为 true：<p draggable=”true” > 元素哦 </p>。
里面的事件有
| 事件 | 描述 |
|---|---|
| ondragstart | 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上 |
| ondragenter | 当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上 |
| ondragover | 拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上（默认地，无法将数据 / 元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式 event.preventDefault() 方法。） |
| ondrop | 被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 |
| ondragend | 当拖拽完成后触发的事件，此事件作用在被拖曳元素上 |
方法有
| 方法 | 作用 |
|---|---|
| setData | 设置被拖元素的数据类型和值 |
| getData | 返回在 setData() 方法中设置为相同类型的任何数据 |
实例：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1,
#div2 {
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#drag {
width: 200px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="div1" ondragenter="dragenter(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag" draggable="true"></div>
</div>
<div id="div2" ondragenter="dragenter(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br/>
<p id='text1'></p>
<p id='text2'></p>
<script type="text/javascript">
var text1 = document.querySelector('#text1'),
text2 = document.querySelector('#text2'),
drag = document.querySelector('#drag'),
div1 = document.querySelector('#div1'),
div2 = document.querySelector('#div2');
drag.ondragstart = function (ev) {
text1.innerHTML = '拖拽元素开始被拖拽';
text2.innerHTML = '';
ev
.dataTransfer
.setData("Text", ev.target.id);
};
drag.ondragend = function (ev) {text1.innerHTML = '拖拽完成';};
function allowDrop(ev) {ev.preventDefault();
}
function dragenter(ev) {text2.innerHTML = '拖曳元素进入目标元素';}
function drop(ev) {ev.preventDefault();
var data = ev
.dataTransfer
.getData("Text");
ev
.target
.appendChild(document.getElementById(data));
text2.innerHTML = '被拖拽的元素在目标元素上同时鼠标放开';
}
</script>
</body>
</html>就讲这么多了，接下来你们可以自己发挥想象做出好多好玩的东西了。
正文完
发表至： javascript
2019-08-02
