[TOC] ``` <div class="dropzone"> <span class="draggable" > 该节点可拖拉 </span> </div> <div class="dropzone">123</div> <div class="dropzone">123</div> <div class="dropzone">123</div> <div >不可放置区</div> //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); } }); ```