拖拽

可拖拽元素　设置　draggable: true.可绑定监听事件 dragstart、drag、dragend

放置区域：可绑定监听事件 dragenter、dragover、dragleave、drop

// 可拖拽原素
<img id="test" src="xxx" draggable="true" />

// 可放置区域
<div id="layer-photos-box"></div>

const box = document.getElementById('layer-photos-box');
const oTest = document.getElementById('test');

// 拖拽开始
oTest.addEventListener('dragstart', function(e) {
    // 此处保存 拖拽元素等信息
    event.dataTransfer.setData("text",`${event.target.id}`);
    console.log('dragstart');
})
// 拖拽中
oTest.addEventListener('drag', function(e) {
    console.log('drag');
})
// 拖拽结束
oTest.addEventListener('dragend', function(e) {
    console.log('dragend');
})


// 进入可放置区域
box.addEventListener('dragenter', function(e) {
    console.log('dragenter');
})
// 离开可放置区域
box.addEventListener('dragleave', function(e) {
    console.log('dragleave');
})
// 悬浮在放置区域
box.addEventListener('dragover', function(e) {
    e.preventDefault()
    console.log('dragover');
})
// 放置到可放置区域
box.addEventListener('drop', function(e) {
    // 获取到可拖拽元素的信息，并添加到可拖拽区域
    var id = event.dataTransfer.getData("text")
    e.preventDefault()
    e.target.appendChild(document.getElementById(id))
    console.log('drop');
})

drop事件跟dragover事件都调用了preventDefault事件来阻止默认事件的发送，那是因为浏览器默认不能在拖拽以后进行放置，所以需要我们手动的取消默认事件。

这三个事件必须要有： dragstart、dragover、drop

拓展链接

• 本文作者： 王不留行
• 本文链接： https://wyf195075595.github.io/2022/07/08/programming/javascript/拖拽/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！