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

该功能被称为＆＃34;处理＆＃34;。

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

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

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

Answer 2

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

<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>

Answer 3

从2.19版开始，您可以使用

<draggable handle=".handle">

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

3 个答案: