拖拽事件的dataTransfer

<script type="text/javascript">
//拖拽元素
    var box3 = document.querySelector(".box3");
//目标元素
    var target = document.querySelector(".box2");
//拖拽元素的事件
    box3.ondragstart = function(e){
        console.log("拖拽开始");
        console.log(e.dataTransfer);
    //输出结果是以下
    /*
    DataTransfer {dropEffect: "none", 
                  effectAllowed: "uninitialized",
                   items:DataTransferItemList, 
                  types: Array(0), 
                  files: FileList}
    dropEffect:"link"
    effectAllowed:"link"
    files:FileList
    items:DataTransferItemList
    types:Array(0)
    __proto__:DataTransfer
    */
        e.dataTransfer.effectAllowed = "link";
        e.dataTransfer.setData("text",e.target.className);
    }
    box3.ondrag = function(){
        //console.log("拖拽中");
    }
    box3.ondragend = function(){
        //console.log("拖拽结束");
    }
    //目标元素的事件
    target.ondragenter = function(){
        //console.log("进入目标元素");
    }
    target.ondragleave = function(){
        //onsole.log("离开目标元素");
    }
    //
    target.ondragover = function(e){
        //console.log("在目标元素上移动");
        e.preventDefault();//阻止浏览器的默认事件  才可以触发ondrop事件
        e.dataTransfer.dropEffect = "link";
    }
    target.ondrop = function(e){
        console.log("在目标元素上放手");
        //target.appendChild(box3);
        var eclassName = e.dataTransfer.getData("text");
        target.appendChild(document.querySelector("."+eclassName))
        //在目标元素里面追加拖拽的元素
    }
</script>

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

setDate###

dataTransfer.setData(formata,content)
format:数据格式,支持text URL 或者其他MIME 类型
content:要传递的内容

getData###

dataTransfer.getData(formata) 获取通过setData设置的值

注意###

dataTransfer.effectAllowed (设置拖拽元素的鼠标效果)

只能在 ondropstart 里设置###

常见的有:
copy link move none all copyLink ...
当定为 none 时,ondrop 无法触发

dataTransfer.dropEffect 设置目标元素的鼠标效果,如果和effectAllowed同时设定,则必须一致