如何用html实现元素拖放

1、首先我们搭建一个html框架，元素至少需要有两个：

1.拖放的物体id

2.放置的容器id（可多个）

2、其次是编写在拖放物体id的事件处理：

ondragstart事件：

ondragstart 属性调用了一个 drag(event) 函数，规定拖动什么数据。

dataTransfer.setData() 方法设置被拖动数据的数据类型和值

在这个例子中，数据类型是text，值是它的id

3、其次是编写放置容器id的事件处理：

1.ondragover事件：

这个事件规定数据能被拖放到何处的范围，拖拽到范围内的时候会出现允许的手势。这个例子中绑定了allowDrop时间，主要任务在于阻止默认行为，很多人不懂，其实是必须的，因为本身默认是阻止放置物体的，所以要阻止默认行为

4、续上：

2.ondrop时间：

当放开拖放数据的时候，会触发这个事件，我们绑定了一个函数drop，函数内需要执行：

阻止默认行为->getData获取数据类型->把被拖元素追加到容器内

5、运行代码效果：