如何使用 Vue.Draggable 禁用对特定元素的拖动答案

【问题标题】：How to disable dragging on specific element using Vue.Draggable如何使用 Vue.Draggable 禁用对特定元素的拖动
【发布时间】：2017-12-26 20:36:20
【问题描述】：

如何设置只有.btn-drag可以拖动整行？我正在使用https://github.com/SortableJS/Vue.Draggable

目前我也可以使用 button#options 拖动，这是不受欢迎的

    <draggable v-model="textElements">
        <transition-group>
            <div class="is-draggable" v-for="element in textElements" :key="element.text">
                <div>
                    {{ element.text }}
                </div>
                <button class="btn btn-transparent">Options</button>
                <button class="btn btn-transparent btn-drag">Drag</button>
            </div>
        </transition-group>
    </draggable>

在文档中，他们提到我们可以将:move="checkMove" 放在<draggable> 上，但在功能上我不确定如何检查到底拖动了什么？返回 false 通常可以正常禁用拖动

methods: {
    checkMove(evt) {
        console.log(evt)
        return false
    }
}

Console.log(evt) 显示了这一点，但我不确定我可以使用哪个属性来准确确定是什么开始了拖累https://image.prntscr.com/image/r17zNkxoSWGdVQs_5nR09w.png

【问题讨论】：

标签： vue.js drag-and-drop sortablejs

【解决方案1】：

该功能称为“句柄”。

https://github.com/SortableJS/Vue.Draggable#features

https://github.com/SortableJS/Vue.Draggable#options

https://github.com/RubaXa/Sortable#options
handle 此处的选项应该会有所帮助。

【讨论】：

谢谢，这是一个解决方案：

【解决方案2】：

从2.19版本开始，可以使用

<draggable handle=".handle">

【讨论】：

【解决方案3】：

这里的“item”类元素只能拖动，可以像这样指定 draggable=".item" 使用可拖动标签内的可拖动选项

<draggable v-model="myArray" draggable=".item">
<div v-for="element in myArray" :key="element.id" class="item">
    {{element.name}}
</div>
<button slot="header" @click="addPeople">Add</button>

【讨论】：

【解决方案4】：

您必须在可拖动组件中传递一个道具。

例子：

<draggable :options="{handle: '.drag-only-this'}">

如需了解更多信息，请联系All sortable options

【讨论】：

【解决方案5】：

可以将:not() 选择器用于多个元素组的特定元素

<draggable v-model="myArray" draggable=".item:not(.exclude-this-item)"> ?
  <div v-for="element in myArray" :key="element.id" class="item exclude-this-item"> ?
    {{element.id}}
  </div>
  <div v-for="element in myArray" :key="element.name" class="item">
    {{element.name}}
  </div>
  <div v-for="element in myArray" :key="element.city" class="item">
    {{element.city}}
  </div>
</draggable>

【讨论】：