-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
沉沙
2018-07-25
来源 ：
阅读 3060
评论 0
摘要：本篇教程探讨了HTML5拖放API的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。
简单拖放规则
1. 对需要进行拖放的元素，将draggable 属性值置为true,允许元素可拖放；
2. 给元素绑定开始拖动事件（ondragstart），规定当元素被拖动时，会发生什么;
3. 给元素绑定拖动经过事件(ondragover),规定在何处放置被拖动的数据.默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式。
event.preventDefault()
1. 进行放置操作，即是给元素绑定ondrop事件，规定放置被拖动元素时，需要进行的操作；
案例
HTML
<div>
<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 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 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);
}
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！
喜欢 | 0
不喜欢 | 4
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
