HTML5 拖放 (Drag 和 Drop)
W3Cschool----HTML5 拖放
- 首先:为了把一个元素设置为可拖放,请把
draggable
属性设置为true
- 然后,规定当元素被拖动时发生的事情。
ondragstart
属性调用了一个drag(event)
函数,规定拖动什么数据。dataTransfer.setData()
方法设置被拖动数据的数据类型和值
<div data-lable='listGroup' onDrop={drop} onDragOver={allowDrop}></div>
<div data-lable='listGroup' onDrop={drop} onDragOver={allowDrop}>
<div data-lable='title'>
分组
</div>
<div draggable={true} onDragStart={drag} id={nowGroup?.id} data-lable='groupInfo'>
列表内容
</div>
</div>
ondragover
事件规定被拖动的数据能够被放置到何处。默认地,数据/元素无法被放置到其他元素中。为了实现拖放,我们必须阻止元素的这种默认的处理方式。这个任务由ondragover
事件的event.preventDefault()
方法完成- 当放开被拖数据时,会发生 drop 事件。
ondrop
属性调用了一个函数,drop(event)
-
- 调用
preventDefault()
来阻止数据的浏览器默认处理方式(drop 事件的默认行为是以链接形式打开) - 通过
dataTransfer.getData()
方法获得被拖的数据。该方法将返回在setData()
方法中设置为相同类型的任何数据 - 被拖数据是被拖元素的
id
- 把被拖元素追加到放置元素中
- 调用
// 取消父级默认禁止拖拽
const allowDrop = (ev: any) => {
ev.preventDefault();
ev.stopPropagation();
}
// 拖拽起始记录元素Id
const drag = (ev: any) => {
ev.dataTransfer.setData("Text", ev.target.id);
}
// 拖拽结束位置创建DOM
const drop = (ev: any) => {
ev.preventDefault();
ev.stopPropagation();
let data = ev.dataTransfer.getData("Text");
if (ev.target.dataset.lable === 'listGroup') {
ev.target.appendChild(document.getElementById(data) as Node);
return
}
if (ev.target.dataset.lable === 'title' || ev.target.dataset.lable === 'groupInfo') {
let fatherBox = ev.target.parentNode
fatherBox.appendChild(document.getElementById(data) as Node);
return
}
}
这里是列表操作,所以使用了 data-lable
、ev.target.dataset.lable
来进行锁定能进行操作的DOM。
ev.target.appendChild(document.getElementById(data) as Node)
这里appendChild()
方法提示需要传递 Node
元素,而不是 HTMLElement
元素,所以使用 as Node
的方式解决报错