如何用html实现元素拖放

HTML5新增了拖放的api，指的是抓取一个物体放置在一个容器中。注重：任何物体都可以被拖放

东西/原料

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
运行代码结果：