'How to disable dragging on specific element using Vue.Draggable

How can I set so that only .btn-drag can drag whole row? I am using https://github.com/SortableJS/Vue.Draggable

Currently I can drag also with button#options which is undesired

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

In docs they mention that we can place :move="checkMove" on <draggable> but in function I am not sure how can I check what exactly was dragged? Returning false works correctly for disabling dragging in general

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

Console.log(evt) shows this but I am not sure which property I can use to pinpoint exactly what started a drag https://image.prntscr.com/image/r17zNkxoSWGdVQs_5nR09w.png

vue.jsdrag-and-dropsortablejs


Solution 1:[1]

The functionality is called "handles".

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

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

https://github.com/RubaXa/Sortable#options
handle option here should help.

Solution 2:[2]

Starting from version 2.19, you can use

<draggable handle=".handle">

Solution 3:[3]

Here the elements with class "item" are only draggable , that can specified like this draggable=".item" usign the draggable option inside the draggable tag

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

Solution 4:[4]

You have to pass a prop in a draggable component.

Example:

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

For exploring more here is a All sortable options

Solution 5:[5]

can use :not() selector for specific element for group of multiple elements

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bsalex
Solution 2 David Desmaisons
Solution 3 Prashanth Bhonagiri
Solution 4 Saleheen Noor
Solution 5 GMKHussain

Related Questions