如何用html实现元素拖放

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

东西/原料

• HBUILD编纂器（小编小我常用的）
• html文件

方式/步调

1. 1

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

   1.拖放的物体id

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

   
2. 2

   其次是编写在拖放物体id的事务处置：

   ondragstart事务：

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

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

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

   
3. 3

   其次是编写放置容器id的事务处置：

   1.ondragover事务：

   这个事务划定数据能被拖放到何处的规模，拖拽到规模内的时辰会呈现许可的手势。这个例子中绑心猿意马了allowDrop时候，本家儿要使命在于阻止默认行为，良多人不懂，其实是必需的，因为自己默认是阻止放置物体的，所以要阻止默认行为

   
4. 4

   续上：

   2.ondrop时候：

   当铺开拖放数据的时辰，会触发这个事务，我们绑心猿意马了一个函数drop，函数内需要执行：

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

5. 5

   运行代码结果：

   

注重事项

• 需要注重的是阻止默认行为是必需进行的，否则是会掉效的
• 但愿可以帮忙大师理解拖拽，更多常识会更新哦