vuedraggable实现不同列表之间的拖拽

项目需要做到图片拖拽的效果,找到了这个组件,送上GitHub地址,并且记录如下。

想要的效果是能做到同级拖拽(排序)以及跨层拖拽(从一个列表到另一个列表)。


1、需要安装依赖

npm install vuedraggable --save

如果不行,可以借助淘宝镜像,用cnpm install vuedraggable --save

2、引入依赖
在需要的文件夹下引入import draggable from "vuedraggable";

3、调用组件

components: {
    //调用组件
    draggable,
},

4、使用组件


    
         
{{item.name}}

版本2指出用v-bind代替原本的:options,用tag代替原本的element。
注:transition-group必须是draggable的下面一层,两个必须紧挨着,不然拖拽的时候会出现整个数组被拖拽的现象,而不是单条数据;transition-group下面一层必须是v-for的内容,不能额外再加div;样式效果最好在div上写,不要在draggable和transition-group上写,很多效果都不能实现。


最简单的效果就有了,动画就要根据各自的需求去探索了。

你可能感兴趣的:(javascript)