拖放API

设置元素属性 draggable=true 即可让元素能够拖放

拖放源：被拖放的元素

拖放目标：被拖放的元素到达的目标元素

拖放源事件：

• dragstart：拖放源开始被拖放时触发
• drag：拖放源被拖放的过程中触发
• dragend：拖放源在拖放结束时触发

拖放目标事件：

• dragenter：拖放源进入元素边界时触发
• dragleave：拖放源离开元素边界时触发
• dragover：拖放源在元素内部时不断被触发
• drop：拖放源被释放到元素内部时触发

dataTransfer是拖放事件对象中的一个属性，其中保存了跟拖放相关的信息，它的字符串属性dropEffect，可以设置鼠标在拖放目标中的样式，可设置的值为：

• copy
• move
• link
• none

<div class="left" data-allowed="true">
            <div id="test" draggable="true" class="color1 item">JavaScript</div>
            <div draggable="true" class="color2 item">Java</div>
            <div draggable="true" class="color3 item">python</div>
            <div draggable="true" class="color4 item">django</div>
            <div draggable="true" class="color5 item">css3</div>
            <div draggable="true" class="color6 item">html5</div>
            <div draggable="true" class="color7 item">Vue</div>
        </div>


 <tr>
                        <td id="tdtest"></td>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                        <th>星期四</th>
                        <th>星期五</th>
                        <th>星期六</th>
                        <th>星期日</th>
                    </tr>

var div = document.getElementById("test");
var tdtest = document.getElementById("tdtest");
// 当拖放开始，触发的事件
div.ondragstart = function () {
    console.log("dragstart");
}
// 过程中
div.ondrag = function () {
    console.log("drag");
}
// 结束后【放手】
div.ondragend = function () {
    console.log("dragend");
}

// 进入边界，就触发该事件
tdtest.ondragenter = function () {
    console.log("drag enter");
}
// 只要在内部，就一直触发
tdtest.ondragover = function (e) {
    //阻止浏览器的默认行为
    e.preventDefault();
    //设置鼠标在拖放目标中的样式
    //可以设置的值：copy 、move、none 、link
    e.dataTransfer.dropEffect = "link";
    console.log("drag over");
}
// 离开边界
tdtest.ondragleave = function () {
    console.log("drag leave");
}
// 只在目标元素上触发【前提：目标元素允许拖拽】
tdtest.ondrop = function () {
    console.log("drop");
}

container.ondragover = function(e){
    e.preventDefault();//阻止默认的拖拽行为
    console.log(e.target);
}