web-dev-qa-db-ja.com

Vue.Draggableを使用して特定の要素のドラッグを無効にする方法

.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.jsdrag-and-dropsortablejs
5
Marko

この機能は「ハンドル」と呼ばれます。

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

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

https://github.com/RubaXa/Sortable#options
ここの handleオプションが役立つはずです。

8
Bsalex

バージョン2.19以降、次を使用できます

<draggable handle=".handle">
0
David Desmaisons