拖拽事件

drag翻译拖拽

有一些标签天生可以拖拽，比如img标签，一般元素如果想触发拖拽行为，需要给被拖拽的元素添加一个属性

draggable=”ture”

1 2	`<div draggable="true">被拖拽的元素</div> //在行内样式里添加获取到的元素.draggable = true //在js里添加`

拖拽事件需要两个元素完成一个完整的拖拽

拖拽元素
目标的元素

拖拽事件设置

绑定给拖拽元素的事件

dragstart 拖拽开始

是绑定在被拖拽的元素上的，在按下鼠标开始拖拽的那一瞬间触发开始拖拽事件

drag 拖拽移动

是绑定在被拖拽的元素上的

dragend 拖拽结束

是绑定在被拖拽的元素上的

绑定给目标元素的事件

dragenter 拖拽元素进入目标元素

绑定给目标元素

当光标进入目标元素那一瞬间触发
dragleave 拖拽元素离开目标元素

绑定给目标元素

当光标离开目标元素那一瞬间触发
dragover 拖拽元素在目标元素里移动

绑定给目标元素
drop 拖拽元素在目标元素内放手

绑定给目标元素

当要在目标元素内放手行为触发时，必须在dragover(拖拽元素在目标元素内移动)事件内阻止默认行为

拖拽元素进入另一个元素内，并且按照拖拽顺序排列案例

let i;
img.addEventListener('dragstart', function () {
    i = this
})
span.forEach(function (item) {
    item.draggable = true
    item.addEventListener('dragstart', function () {
        i = this
    })
})
div.addEventListener('dragover', function () {
    event.preventDefault();
})
div.addEventListener('drop', function () {
    if (event.target.nodeName == "SPAN") {
        this.insertBefore(i, event.target)
        return;
    }
    this.appendChild(i)
})
 //span为获取到的span标签集合
 //div为拖拽给的目标元素
 //img为一个图片

拖拽事件

拖拽事件

拖拽事件设置

Hey!