HTML5 拖放 （Drag 和 Drop）笔记

HTML5 拖放 （Drag 和 Drop）

W3Cschool----HTML5 拖放

1. 首先：为了把一个元素设置为可拖放，请把 draggable 属性设置为true
2. 然后，规定当元素被拖动时发生的事情。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>

3. ondragover 事件规定被拖动的数据能够被放置到何处。默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。这个任务由 ondragover 事件的 event.preventDefault() 方法完成
4. 当放开被拖数据时，会发生 drop 事件。ondrop 属性调用了一个函数，drop(event)
5. • 调用 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 的方式解决报错