一、内容简介
❝
很多股票软件都会有拖拽、置顶排序，例如雪球中的自选股编辑可以拖拽以及置顶更新排序,以下我们来实现一个类似的功能：
❞
二、效果预览
三、拖拽功能实现
❝
拖拽主要是利用绝对定位以及移动端事件
touchMove以及touchEnd将拖拽的坐标转换成下标，下标对应的是拖拽的元素。放开手时利用splice的删除以及插入改变位置。❞
- touchMove
我在每个列表中加了个height高度为0的盒子，当我拖拽的元素经过时条件符合的情况下这个height会被撑开一个盒子的高度，这样视觉上就能形成我拖拽的元素经过了这个盒子并把他顶出一个位置，此时我如果放开手，就直接占住这个位置了。
defaluthg这个函数是默认初始化列表的height为0,不然等条件成立的盒子展开后，条件忽然不成立了 当前的盒子会一直展开不会进行收缩，此方法是为了解决这个问题。
- touchEnd
松开后将当前拖动的元素在列表中进行删除dragIndex代表的是将要插入的位置下标arguments[0]是从父级传过来的函数，用来更新排版后的列表。
四、置顶功能实现
置顶就是将当前点击的元素往上移，非点击的所有元素往下一个盒子的高度，加上过渡效果形成一种在交换位置的视觉效果，加上定时器是为了等过渡效果完成后在进行列表删除插入的更新。
五、最后
❝
虽然本文的
demo不是利用Vue编写的但完全可以套用到Vue-uniApp小程序上。仓库地址: github,欢迎大家点个start。❞
