用两种不同的姿势来实现拖动排序

正文

请到「今天看啥」查看全文

首先，我肯定是实现了效果的，如下图所示的：

粗略介绍下流程吧，首先需要确定的是应该是什么效果，打个比方，我把a拖到了b上，b能很明显的感觉到，“啊，有什么奇怪的东西进入我的体内了”。但是b并不知道a是想在前面还是想在后面...这时候你就发现问题了吧，对！提问：“a和b到底谁在上面谁在下面？”所以我们刚开始要约定一个规范，把上面的a拖向下面的b，那么就把a排在b的下面，反之，把下面的a拖向上面的b，那么就把a放在b的上面～首先我需要这四个对象：

let dragObj, enterObj, dragIndex, enterIndex;
// dragObj 被拖动的对象a，整个拖动过程它是不会变的
// enterObj 最终进入的对象b，在drop里可以获取到
// dragIndex a在列表中的下标
// enterIndex b在列表的下标

通过比较 dragIndex 和 enterIndex 的大小来决定a和b的关系，剩下的就是对dom进行操作了：

if (dragIndex < enterIndex) {
  dragObj.remove();
  enterObj.after(dragObj);
} else if (dragIndex > enterIndex) {
  dragObj.remove();
  enterObj.before(dragObj);
}   

是不是相当简单了 效果预览 (chrome下观看)

请到「今天看啥」查看全文