今日工作中有拖拽功能的需求,随记录下drag相关的知识。
重点知识
datatransfer:用于存储拖拽的数据。
draggable:元素需要设置draggable=“true”,不然元素无法拖拽。
dragstart:当元素被拖拽时的时候触发,此事件作用在拖拽元素上。
dragenter:当元素进入目标元素时触发,事件作用在目标元素上。
dragover:拖拽元素在目标元素上移动时候触发,事件作用在目标元素上。需要注意的是,需要对document进行dragover事件,并阻止默认事件,否则drop不能响应。
dragend:拖拽元素完成后触发,事件作用的拖拽元素上。
drop:被拖拽元素在目标元素上鼠标放开的时候出发,事件作用在目标元素上。
demo实例
demo链接
drag-list元素经过拖拽至于任意的li元素里面。
相关代码:html
<ul class="drag-box">
<li class="dropzone" draggable="true"><span id="draggable" draggable="true">drag-list</span></li>
<li class="dropzone"></li>
<li class="dropzone"></li>
<li class="dropzone"></li>
</ul>
js
var dragged;
document.getElementById('draggable').addEventListener('dragstart ',function(event){
event.dataTransfer.setData('text/plain',null)
},false)
document.addEventListener('drag',function(event) {
},false)
document.addEventListener('dragstart',function(event){
console.log(event.target);
dragged=event.target;
event.target.style.opacity=0.5;
},false)
document.addEventListener('dragend',function(event){
event.target.style.opacity='';
},false)
document.addEventListener('dragover',function(event){
// 阻止default to allow drop
event.preventDefault();
},false)
document.addEventListener('dragenter',function(event){
if(event.target.className=='dropzone'){
event.target.style.background='purple';
}
},false)
document.addEventListener('dragleave',function(event){
if(event.target.className=='dropzone'){
event.target.style.background='';
}
},false)
document.addEventListener('drop',function(event){
event.preventDefault();
if(event.target.className=='dropzone'){
event.target.style.background='';
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
},false)
结:更多demo继续码字中。比如上传时,桌面拖拽显示、qq浏览器九宫格的个性显示等应用。