欢迎来到福编程网,本站提供各种互联网专业知识!

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

发布时间:2016-07-18 作者:macanfa 来源:转载
这篇文章主要为大家详细介绍了JSHTML5实现拖拽移动列表效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

练习HTML5中的拖放API,实现列表拖拽移动!参考文章:JS HTML5拖拽上传图片预览

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

1.循环设置每个子项的draggable属性,以及设置拖动标记(不会多个或全部子项都移动)

2.每次进入投放区,则检测时候有拖放标记,有则添加dom元素,以此类推

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

HTML:

//空列表
//内容列表
  • 第1项
  • 第2项
  • 第3项
  • 第4项

JS:

 

效果图:

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

相关推荐