HTML5拖拽移动列表

最新推荐文章于 2024-08-16 14:09:54 发布

马灿发

最新推荐文章于 2024-08-16 14:09:54 发布

阅读量5k

点赞数 1

分类专栏： javascript HTML5 文章标签： html5 拖拽事件

本文链接：https://blog.csdn.net/macanfa/article/details/51916942

版权

这篇博客介绍了如何使用HTML5的拖放API来实现列表元素的拖拽移动功能。作者通过设置draggable属性和监听拖放事件，实现在拖入目标区域时动态调整DOM结构，从而达到列表元素移动的效果。此外，还提到了另一种实现思路，利用DataTransfer对象传递子项ID进行移动，但未详细展开。

摘要由CSDN通过智能技术生成

练习HTML5中的拖放API，实现列表拖拽移动！

相关博文：http://blog.csdn.net/macanfa/article/details/51916831

思路：

另一种实现思路是：可以利用拖放中DataTransfer对象作为属性，用setData()和getData()方法传递每个拖动的子项的id等数据，找到指定的子项进行移动….待实验。。。

HTML：

//空列表
<div id="box"></div>
//内容列表
<ul id="con">
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</

关注

专栏目录