1. 简介
拖放(Drag和 drop)是 HTML5 标准的组成部分,为了使元素可拖动,必须把 draggable 属性设置为 true,
整个拖拽事件触发的顺序如下:
dragstart-> drag -> dragenter -> dragover -> dragleave -> drop
->dragend
拖放事件事件详情
一个元素被拖放,他可能会经过很多个元素上,最终到达想要放置的元素内。这里,我暂时把被拖放的元素称为源对象,被经过的元素称为过程对象,到达的元素称为目标对象。不同的对象产生不同的拖放事件。
源对象事件:
dragstart:源对象开始拖放,开始移动时事件触发
drag:源对象拖放过程中,移动被拖拽对象时触发
dragend:源对象拖放结束,整个拖放操作结束时触发。
过程对象事件:
dragenter:源对象进入过程对象范围内,被拖拽对象进入过程对象时被触发
dragover:源对象在过程对象范围内移动,被拖拽对象在过程对象内移动时触发
dragleave:源对象离开过程对象的范围,被拖拽对象离开目标对象时触发
目标对象事件:
drop:源对象拖放到目标对象中,目标对象完全接受被拖拽对象时触发,可理解为在目标对象内松手时触发。
dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此,我们必须阻止浏览器这种默认行为。e.preventDefault();
如果drop接收盒子要想接收到元素,那么接收的拖动元素 dragenter和dragover必须阻止默认行为。
2. HTML部分
添加属性如下:
draggable=“true”
οndrοp=“drop(event,this)”
οndragοver=“allowDrop(event)”
οndragstart=“drag(event, this)”
例如:
<div ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"></div>
3. JS部分
直接coby即可:
var srcdiv = null;
var temp = null;
function drag(ev, divdom) {
srcdiv = divdom;
temp = divdom.innerHTML;
}
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev, divdom) {
ev.preventDefault();
}
function drop(ev, divdom) {
ev.preventDefault();
if (srcdiv !== divdom) {
var childNodes = srcdiv.parentNode.childNodes;
for(let i = childNodes.length-1; i >=0; i--) {
if(childNodes[i].nodeName=='#text'){
childNodes[i].remove();
}
}
var srcDivIndex = Array.prototype.indexOf.call(childNodes,srcdiv);
var divDomIndex = Array.prototype.indexOf.call(childNodes,divdom);
if(srcDivIndex>divDomIndex){
$(srcdiv).after(divdom);
}else if(srcDivIndex<divDomIndex){
$(srcdiv).before(divdom);
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)