参考资料
http://www.w3school.com.cn/html5/html_5_draganddrop.asp
简单拖放规则
- 对需要进行拖放的元素，将draggable 属性值置为true,允许元素可拖放；
- 给元素绑定开始拖动事件（ondragstart），规定当元素被拖动时，会发生什么;
- 给元素绑定拖动经过事件(ondragover),规定在何处放置被拖动的数据.默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式。
event.preventDefault()
- 进行放置操作，即是给元素绑定ondrop事件，规定放置被拖动元素时，需要进行的操作；
案例
HTML
<div class="conatiner">
<ul id="drag">
<!-- 将要进行拖动的元素设置可拖动:draggable = true -->
<li draggable="true"></li>
<li draggable="true"></li>
<li draggable="true"></li>
<li draggable="true"></li>
<li draggable="true"></li>
<li draggable="true"></li>
<li draggable="true"></li>
<li draggable="true"></li>
</ul>
</div>
CSS
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
ul,
ul li {
padding: 0;
margin: 0;
list-style: none;
}
#drag li {
display: inline-block;
margin: 5px;
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
background: lightcoral;
}
#drag li.drag {
background: lightblue;
}
JS
var oDrag = document.getElementById("drag");
// 元素拖动时，执行的操作
oDrag.ondragstart = function(e) {
var target = e.target;
target.classList.add('drag');
target.innerHTML = 'dragged';
}
// 放到何处
oDrag.ondragover = function(e) {
// 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方
e.preventDefault();
}
oDrag.ondrop = function(e) {
var el = e.target;
el.classList.remove('drag')
el.innerHTML = "droped";
if (e.target.nodeName === "LI") {
e.target.parentNode.insertBefore(el, e.target); //将源对象元素插入到目标元素前面
}
}
结果
9B14E928-A61A-4A01-B03E-0BFDC2D0858A.GIF
在不同区域内拖动
实现规则
同简单规则；
代码
HTML
<ul class="drag" id="drag">
<li id="drag1" draggable="true"></li>
<li id="drag2" draggable="true"></li>
<li id="drag3" draggable="true"></li>
<li id="drag4" draggable="true"></li>
</ul>
<br>
<ul class="drop" id="drop">
<li draggable="true" id="drop1"></li>
<li draggable="true" id="drop2"></li>
</ul>
CSS
ul,
ul li {
list-style: none;
}
.drag {
display: inline-block;
width: 500px;
height: 300px;
border: 1px solid lightblue;
}
.drag li {
display: inline-block;
width: 50px;
height: 50px;
top: 30px;
margin: 5px;
background: lightblue;
}
.drop {
display: inline-block;
width: 500px;
height: 300px;
border: 1px solid lightcoral;
}
.drop li {
display: inline-block;
width: 50px;
height: 50px;
background: lightcoral;
margin: 5px;
}
JS
window.onload = function() {
var oDrag = getId('drag');
var aDrag = getEle("li", oDrag);
var oDrop = getId("drop"),
aDrop = getEle("li", oDrop) || [];
for (var i = 0; i < aDrag.length; i++) {
var item = aDrag[i];
item.setAttribute('draggable', true);
item.ondragstart = function(e) {
e.dataTransfer.setData('dragId', this.id)
}
oDrop.ondragover = function(e) {
e.preventDefault();
};
oDrop.ondrop = function(e) {
var id = e.dataTransfer.getData("dragId");
var ele = getId(id);
var target = document.createElement('li')
oDrop.appendChild(target);
target.setAttribute('id', 'drag_' + id)
ele.parentNode.removeChild(ele)
target.setAttribute("draggable", true);
aDrop = getEle('li', oDrop);
};
}
for (var j = 0; j < aDrop.length; j++) {
var item1 = aDrop[j];
item1.ondragstart = function(e) {
e.dataTransfer.setData("dropId", this.id);
};
oDrag.ondragover = function(e) {
e.preventDefault();
};
oDrag.ondrop = function(e) {
var id = e.dataTransfer.getData("dropId");
var ele = getId(id);
var target = document.createElement("li");
oDrag.appendChild(target);
target.setAttribute("id", "drop_" + id);
ele.parentNode.removeChild(ele);
target.setAttribute("draggable", true);
aDrag = getEle("li", oDrag);
};
}
};
/**
* 根据id获取DOM元素
*
* @param {String} id 元素的id
* @returns
*/
function getId(id) {
return document.getElementById(id);
}
/**
* 根据样标签获取DOM元素
*
* @param {String} tagName 样式名称
* @param {Object} parent 父级元素
*/
function getEle(tagName, parent) {
return parent.getElementsByTagName(tagName);
}
结果
59D30836-0437-45FC-A7CF-27B0A887A615.GIF
