蓝韵官方网站,wordpress zerif lite,大连网站建设方案维护,域名注册的网址H5 新增的属性 draggable#xff0c;它能够给与一切的 html 元素拖动的效果。 拖拽元素
属性为 draggabletrue 的元素#xff0c;可拖动#xff0c;且拖动时鼠标变为禁用图标
ps: 直接写 draggable 可能无效
ondragstart
开始拖拽时触发#xff08;按下鼠标…H5 新增的属性 draggable它能够给与一切的 html 元素拖动的效果。 拖拽元素
属性为 draggabletrue 的元素可拖动且拖动时鼠标变为禁用图标
ps: 直接写 draggable 可能无效
ondragstart
开始拖拽时触发按下鼠标并移动的瞬间触发
ondrag
发生在 ondragstart 之后只要开始拖动鼠标未放开就会一直触发
ondragend
拖动结束时触发拖拽后松开鼠标的瞬间触发
拖入元素
ondragenter
任何拖拽元素进入拖入元素时触发鼠标触碰到拖入元素的边界时触发此时还未松开鼠标
ondragover
只要拖拽元素在拖入元素中移动就会一直触发。
ps: 正常情况下元素拖拽时 cursor 都是禁用图标若想进入拖入元素时显示“加入”图标需在 ondragover 事件里加上 e.preventDefault(); 阻止默认行为。
ondragleave
拖拽元素离开拖入元素的瞬间触发一定得先进入再离开
drop
拖拽元素被放置到拖入元素中时触发拖到拖入元素中后松开鼠标的瞬间触发
Vue3 代码示例
templatedivdivclassdivAiddivAdraggabletruedragstarthandleDragstartdraghandleDragdragendhandleDragendA--拖拽元素/divdivclassdivBdragoverhandleDragoverdragenterhandleDragenterdragleavehandleDragleavedrophandleDropB--拖入元素/div/div
/templatescript 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);
}
/scriptstyle scoped
.divA {background: yellow;height: 100px;width: 100px;
}
.divB {margin-top: 20px;background: rgb(105, 108, 243);height: 200px;width: 200px;
}
/style
