//拖拽元素
        var box = document.querySelector(".box");       
        //目标元素
        var target = document.querySelector(".box2");

        box.ondragstart = function (e) {
            //console.log(1,"开始拖拽");
            //dataTransfer 承载体，贯穿整个拖拽周期，使用setData放置数据，getData获取数据
            console.log(e.dataTransfer);
            e.dataTransfer.effectAllowed = "move";
//e.target就是被拖拽的元素
            e.dataTransfer.setData("text",e.target.id);
        }
//浏览器禁止在元素上drop (禁止将其他元素拖到目标元素上放手)
        //需要在 dragover 时阻值浏览器的默认事件才能出发  ondrop(drop:落下，投下)
        target.ondragover = function (e) {
            //console.log(6,"在目标元素上移动");
            e.preventDefault();
            e.dataTransfer.dropEffect = "move";
        }
        target.ondrop = function (e) {
            //console.log(7,"在目标元素上放手");
            //元素已经存在时，使用appendChild拼接到另一个元素中时，并且从原来父元素中删除
            
            //console.log(e.dataTransfer.getData("text"));
            var eId = e.dataTransfer.getData("text");
            target.appendChild(document.querySelector("#"+eId));
            
        }

其中：

     * dataTransfer  贯穿于整个拖拽生命周期的承载对象

     * 
     * dataTransfer.setData(format,content)
     *      format : 数据格式，支持text URL 或其他mieme类型
     *      content : 要传递的内容
     * 
     * dataTransfer.getData(format) 获取通过setData设置的值
     * 
     * dataTransfer.effectAllowed  设置拖拽元素的鼠标效果
     * 常见的有: copy link move none all copyLink...
     * 当指定为none时，ondrop无法触发
     * 只能在ondragstart里设置
     * 
     * dataTransfer.dropEffect  设置在目标元素的鼠标效果
     * 如果和 effectAllowed同时指定，则必须与 effectAllowed值相同，否则无法放置拖拽元素