实例:拖拽列表插件
最后更新于：2022-04-02 03:24:44
[TOC]
```
';
该节点可拖拉
123
123
123
不可放置区
//javascript
(function (win) {
'use strict';
var document=win.document;
/**
*
* @param allowDrag 允许拖拽的 node 默认 .draggable
* @param allowDrop 允许放置的 node 默认 .dropzone
* @param callback 回调函数
*/
function drop(allowDrag,allowDrop,callback) {
var DropNode = allowDrag;
var DragNode = allowDrop;
var Drag = removeTag(DragNode);
var Drop = removeTag(DropNode);
var callback = callback;
var node;
//设置拖拽属性
setdrag(DragNode);
//拖拉节点
document.addEventListener('drag',function (e) {
node = e.target;
if (typeof callback !='undefined' && typeof callback[e.type] !='undefined'){
callback[e.type](e);
return true;
}
node.style.backgroundColor='#ccc';
node.style.opacity=0.5;
},false);
document.addEventListener('dragstart',function (e) {
if (typeof callback !='undefined' && typeof callback[e.type] !='undefined'){
callback[e.type](e);
return true;
}
e.target.style.backgroundColor=''
},false);
document.addEventListener('dragend',function (e) {
if (typeof callback !='undefined' && typeof callback[e.type] !='undefined'){
callback[e.type](e);
return true;
}
e.target.style.backgroundColor='';
e.target.style.opacity='';
},false);
//目标节点
document.addEventListener('dragenter',function (e) {
if (isSupport(e)){
if (typeof callback !='undefined' && typeof callback[e.type] !='undefined'){
callback[e.type](e);
return true;
}
e.target.style.backgroundColor = '';
}
},false);
document.addEventListener('dragover',function (e) {
event.preventDefault();
if (isSupport(e)){
if (typeof callback !='undefined' && typeof callback[e.type] !='undefined'){
callback[e.type](e);
return true;
}
e.target.style.backgroundColor='#ccc';
}
},false);
document.addEventListener('dragleave',function (e) {
if (typeof callback !='undefined' && typeof callback[e.type] !='undefined'){
callback[e.type](e);
return true;
}
e.target.style.backgroundColor='';
},false);
document.addEventListener('drop',function (e) {
var target = e.target;
target.style.backgroundColor='';
if (isSupport(e)){
if (typeof callback !='undefined' && typeof callback[e.type] !='undefined'){
callback[e.type](e,node);
return true;
}
node.parentNode.removeChild(node);
target.appendChild(node);
}
});
//判断是否指定node
function isSupport(e){
var classList = e.target.classList;
if(Array.prototype.indexOf.call(classList,Drop)===-1) {
return false;
}
return true;
}
/**
* 移除 # . 等操作
* @param allowDrag
*/
function removeTag(allowDrag) {
var list=["#",'.'];
var need=false;
list.forEach(function (item) {
if (allowDrag.indexOf(item)!==-1){
need=true;
}
})
if (need){
allowDrag = allowDrag.slice(1);
}
return allowDrag;
}
function setdrag (allowDrag) {
var nodeList = document.querySelectorAll(allowDrag);
nodeList.forEach(function (item) {
item.setAttribute('draggable',true)
});
}
};
win.drop = drop;
})(window);
//===============================================
//方式一
// drop('.dropzone','.draggable');
//方式二:
drop('.dropzone','.draggable',{
drag:function(e){
e.target.style.backgroundColor='#ccc';
e.target.style.opacity=0.5;
},
dragstart:function(e){
e.target.style.backgroundColor='red'
},
dragend:function(e){
e.target.style.backgroundColor='';
e.target.style.opacity='';
},
dragenter:function(e){
e.target.style.backgroundColor = 'blue';
},
dragover:function(e){
e.target.style.backgroundColor='green';
},
dragleave:function(e){
e.target.style.backgroundColor='';
},
drop:function (e,node) {
node.parentNode.removeChild(node);
e.target.appendChild(node);
}
});
```