SOURCE

(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);
    }
});

<div class="dropzone">
    <span class="draggable" >
        该节点可拖拉
    </span>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div >不可放置区</div>

.dropzone{
  width:100px;
  height:30px;
  background-color: #fff;
  border:1px solid red;
}