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

先上代码:

简单的拖动排序示例

{% jsfiddle 92dcvg1u %}

拖动 clone 示例

{% jsfiddle ebemtLz6 %} 这里用上了 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地址