上期介绍了html与js拖动的知识点,这一期我们来实现下拖动排序

思路

  • 在一个列表中,每个元素都可以被拖放,那首先要给每个元素设置 draggable 属性为 true。
  • 监听每个元素的 dragstart 事件,对源对象做样式处理来区分。
  • 监听每个元素的 dragenter 事件,当源对象进入到当前元素里,就把源对象添加到该元素之前。这样子后面的元素就会被源对象挤下去了,实现了排序的效果。
  • 但是会发现,源对象无法排到最后一个去,只能在倒数第二。这时就要监听 dragleave 事件,当过程对象是最后一个元素时,源对象离开了过程对象,这时就把源对象添加到最后去。

主要代码如下

实现效果:

当然,代码比较繁琐,最简单的方式就是去github上找lib,只需一行代码即可实现拖放排序

发表评论

电子邮件地址不会被公开。 必填项已用*标注