Vue的一个拖动插件

这里介绍一个拿来即用的拖动插件
这里只是一个 es5 的 demo

先上代码:

简单的拖动排序示例

拖动 clone 示例

这里用上了 option 中的 group配置,
group:{ name:'people', pull: 'clone', put:false}
name: 所有可互相拖动的列表必须同一个 name 下
pull: true|false|’clone’ 开启|关闭|复制 拖动时的元素, 当为 true 的时候拖动会把该元素从列表中移除
put: true|false|array 允许|禁止|数组中指定的值 添加到当前数组列当中
这样的话当两边的option 都是 {group:{ name:'people', pull: true, put:true }}的时候就运行两个列表互相拖动了
如下:

1
2
3
4
5
6
7
8
9
10
<div class="drag">
<h2>List 1 Draggable</h2>
<draggable v-model="list" class="dragArea" :options="{group:{ name:'people', pull: true, put:true }}">
<div v-for="(element, index) in list" :key="index">{{element.name}}</div>
</draggable>
<h2>List 2 Draggable</h2>
<draggable v-model="list2" class="dragArea" :options="{group:{ name:'people', pull: true, put:true }}">
<div v-for="(element, index) in list2" :key="index">{{element.name}}</div>
</draggable>
</div>

更多的配置在 这里,有时间的话我就都试一下

github地址

这个博客有个赞赏功能,不试一下吗?