今天项目给了个需求,让用户自定义付款的选项,我首先想到的就是有没有一个拖拽的组件,上网一搜搜到了这个draggable插件,这是官网文档github.com/SortableJS/…;
首先
下载命令:npm install vuedraggable
引入注册:import draggable from 'vuedraggable'
以下是我在项目中的使用
draggable标签中的style忽略,是需求原因,只需要:list绑定和遍历的数组一致即可。@end="savePositions"是我用来保存移动后的位置的,做一个持久化。
@end是拖动后的回调,因此可以在这里记录移动后的位置,我这边对绑定的数据做了添加一个position属性表示索引,添加完后又用sort做了个排序,这时候数据就是移动后的最新数据了,这边可以把新数组传给后端,这样下次用户登陆后就是自定义的界面了