如何使用 Vue.Draggable 禁止拖动特定元素

Question

我怎样才能设置只有 .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

原文由 Marko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

该功能称为“句柄”。

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

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

https://github.com/RubaXa/Sortable#options

handle 此处的选项应该有所帮助。

原文由 Bsalex 发布，翻译遵循 CC BY-SA 3.0 许可协议