拖拽属性 draggable

H5 新增的属性 draggable，它能够给与一切的 html 元素拖动的效果。

拖拽元素

属性为 draggable="true" 的元素，可拖动，且拖动时鼠标变为禁用图标

ps: 直接写 draggable 可能无效

ondragstart

开始拖拽时触发（按下鼠标并移动的瞬间触发）

ondrag

发生在 ondragstart 之后，只要开始拖动，鼠标未放开就会一直触发

ondragend

拖动结束时触发（拖拽后，松开鼠标的瞬间触发）

拖入元素

ondragenter

任何拖拽元素进入拖入元素时触发（鼠标触碰到拖入元素的边界时触发，此时还未松开鼠标）

ondragover

只要拖拽元素在拖入元素中移动就会一直触发。

ps: 正常情况下元素拖拽时 cursor 都是禁用图标，若想进入拖入元素时显示“加入”图标，需在 ondragover 事件里加上  e.preventDefault();  阻止默认行为。

ondragleave

拖拽元素离开拖入元素的瞬间触发（一定得先进入再离开 ）

drop

拖拽元素被放置到拖入元素中时触发（拖到拖入元素中后，松开鼠标的瞬间触发）

Vue3 代码示例

<template><div><divclass="divA"id="divA"draggable="true"@dragstart="handleDragstart"@drag="handleDrag"@dragend="handleDragend">A--拖拽元素</div><divclass="divB"@dragover="handleDragover"@dragenter="handleDragenter"@dragleave="handleDragleave"@drop="handleDrop">B--拖入元素</div></div>
</template><script setup>
function handleDragover(e) {e.preventDefault();console.log('handleDragover');
}function handleDragenter(e) {console.log('handleDragenter');
}function handleDragstart(e) {e.dataTransfer.setData('text/plain', event.target.id);console.log('handleDragstart');
}function handleDrag(e) {console.log('handleDrag');
}function handleDragend(e) {console.log('handleDragend');
}function handleDragleave(e) {console.log('handleDragleave');
}function handleDrop(e) {console.log('handleDrop', e);const id = e.dataTransfer.getData('text/plain');const draggableElement = document.getElementById(id);e.target.appendChild(draggableElement);
}
</script><style scoped>
.divA {background: yellow;height: 100px;width: 100px;
}
.divB {margin-top: 20px;background: rgb(105, 108, 243);height: 200px;width: 200px;
}
</style>