HTML5拖放功能
基本概念
在HTML5中，任何元素都可以拖放，Drap和Drop。拖放属于HTML事件中的Mouse事件。
实例讲解
代码地址：
...
<body>
<div id="end-area" class="area"></div>
<img id="start-area" draggable="true" src="http://pic1.zhimg.com/d80d9ff11c28c19123bc75a27d3c1df8_l.jpg">
<script id="jsbin-javascript">
var img = document.getElementById("start-area");
img.ondragstart = function(event) {
event.dataTransfer.setData("Text", event.target.id);
};
var div = document.getElementById("end-area");
div.ondragover = function(event) {
event.preventDefault();
};
div.ondrop = function(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
};
</script>
</body>
...大体模样：
实现过程
1.设置元素可拖放。（HTML部分）
<img draggable="true">
注意：链接和图像都是默认可拖动。因此上述代码可以不用添加draggable属性，但为了可读性还是加上吧。
2.拖放过程需要怎么处理？（JS部分）
需要在被拖元素上绑定事件：ondragstart事件。
基于HTML和JavaScript分离的原则，代码为：
img.ondragstart = function(event) {
event.dataTransfer.setData("Text", event.target.id);
};这代码里面最关键的是dataTransfer对象。它是事件对象（event）的一个属性，所以只能在拖放事件处理程序中访问dataTransfer对象，用来完善拖放功能。
dataTransfer对象有两个方法：getData()和setData()。两个方法之间的关系是：setData()方法的第一个参数，也是getData()方法唯一的一个参数，是一个字符串，表示保存的数据类型，取值为"text"或"URL。
3.拖放到哪个位置？（JS部分）
目标元素绑定事件：ondragover事件。
div.ondragover = function(event) {
event.preventDefault();
};默认地，无法将数据/元素放置到其他元素中。所以通过event.preventDefault()来阻止对元素的默认处理方式。
4.放置。（JS部分）
目标元素绑定事件：ondrop事件。
div.ondrop = function(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
};放置实际上是移动的过程，用appendChild()方法。
相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15