JS HTML5实现拖拽移动列表效果

练习HTML5中的拖放API，实现列表拖拽移动！参考文章：上传图片预览

HTML5拖拽移动列表实现思路：

1.循环设置每个子项的draggable属性，以及设置拖动标记（不会多个或全部子项都移动） 2.每次进入投放区，则检测时候有拖放标记，有则添加dom元素，以此类推

另一种实现思路

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

HTML：

rush:xhtml;"> //空列表

Box">

//内容列表

第1项
• 第2项
• 第3项
• 第4项

JS：

rush:js;">

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助。