分享一个基于vue2.0+的拖动排序组件

先来个效果图:
分享一个基于vue2.0+的拖动排序组件_第1张图片

组件的实现是基于改变源数据的数组位置,所以使用的话必须要对传进去的源数据做一次深拷贝,操作完成后再传排序后的数组回去;
事件是采用了drag系列事件,跟需求和用户操作习惯比较吻合;
图标是element-ui里面的;
过度效果是vue的transition-group标签实现的,这里要注意的是transition-group包裹的次级元素一定要有唯一的key,而且依旧要设置transition样式,否则不会有过度效果;
获取数组下标的处理方式不是特别好,希望路过的大神帮忙指点一下,蟹蟹;

下面是源码:




转载请注明出处蟹蟹

你可能感兴趣的:(学习)