如何使用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

Answer 1

该功能称为"句柄".

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

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

handle这里的https://github.com/RubaXa/Sortable#options选项应该有所帮助.

Answer 2

从2.19版本开始，您可以使用

<draggable handle=".handle">