在这篇文章中
https://andi.cn/page/621649.html
介绍了一个极简的 Vue draggable 互相拖放的例子。
本文稍加修改，实现其中一个组不受拖放影响的例子。
我们需要这样的功能，例如这个组是控件列表，我们将控件拖放到画板上，但是控件列表不应该受影响。
<script src="https://cdn.uv.cc/vue/2.6.10/vue.min.js"></script>
<div id="app">
<div style="
display: flex;
place-content: space-between;
">
<draggable
:group="{
name: 'people',
pull: 'clone',
put: false,
}"
>
<div v-for="item of [1, 2, 3]">
一个极简的 Vue draggable 例子
{{item}}
</div>
</draggable>
<draggable
group="people"
>
<div v-for="item of [1, 2, 3]">
一个极简的 draggable 例子
{{item}}
</div>
</draggable>
</div>
</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>
本文修改处，仅仅将 group 由单独的 people 变成了新增两个元素：
- pull: clone。如果有拉取（拖）时，分身（克隆）出来一个给其使用就行，不干扰本尊。
- put: false。一律拒绝放置，请勿打扰。
声明了这两条，于是，这个队伍（group）不会受到任何影响。
去创作