拖拽事件

一、拖拽事件相关的API介绍

想详细了解的请去MDN网站查看具体相关API

拖拽操作 - Web API | MDN

这边介绍比较重要的几个API：

1.首先是 draggabel （可拖拽），在 HTML 中，除了图像、链接和选择的文本默认的可拖拽行为之外，其他元素在默认情况下是不可拖拽的。要使其他的HTML元素可拖拽，必须做三件事：

将想要拖拽的元素的 draggable 属性设置成 "true"。

为 dragstart 事件添加一个监听程序。

在上一步定义的监听程序中 设置拖拽数据。

2.就是通过dragstart事件添加监听属性或设置事件处理器属性，dataTransfer来持有拖拽数据。dataTransfer持有包含两个信息，数据的类型（或格式）和数据值。

event.dataTransfer.setData("text/plain", "Text to drag");

//参数依次为数据类型和数据

二、拖拽事件实际应用

1、拖拽嵌套案例

2、列表拖拽案例

• 1
• 2
• 3
• 4
• 5

const list = document.querySelector('.list');

let sourceNode;