可以通过设置 "drag-handle" 属性和 "draggable" 属性的限制来限定拖动的范围。例如:
<draggable v-bind="dragOptions" :list="list" @end="onEnd">
<div v-for="item in list" :key="item.id" class="drag-item">
<div class="drag-handle" v-if="dragOptions.handle">{{ item.name }}</div>
<div v-else>{{ item.name }}</div>
</div>
</draggable>
其中 "dragOptions" 中的内容:
data() {
return {
dragOptions: {
handle: '.drag-handle',
draggable: '.drag-item',
animation: 200
list: [{
id: 1,
name: 'Item 1'
id: 2,
name: 'Item 2'
id: 3,
name: 'Item 3'
这样只有当用户拖动 ".drag-handle" 类名的元素时才能拖动 ".drag-item" 类名的元素。