这篇文章中
https://andi.cn/page/621648.html
介绍了一个极简的 Vue draggable 拖曳排序的例子。
本文稍加修改，实现一个 Vue draggable 互相之间拖放的例子。
<script src="https://cdn.uv.cc/vue/2.6.10/vue.min.js"></script>
<div id="app">
<draggable
group="people"
>
<div v-for="item of [1, 2, 3]">
一个极简的 Vue draggable 例子
{{item}}
</div>
</draggable>
<hr/>
<draggable
group="people"
>
<div v-for="item of [1, 2, 3]">
一个极简的 draggable 例子
{{item}}
</div>
</draggable>
</div>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
本文修改了 2 处：
- 将原来的 <draggable> 复制成两份
- 都添加 group="people" 属性
去创作