How to disable dragging on specific element using Vue.Draggable

Question

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

Garter

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

Awad

Thank you, this is a solution: <draggable :options="{handle: '.btn-drag'}" ...> – Garter

The actual solution (to the title) is to use filter, for anyone wondering – Margarine

Answer 2

Starting from version 2.19, you can use

<draggable handle=".handle">

Rascal

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

Rompish

Answer 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

Konopka

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

Hatfield

Answer 6

---

the easiest way is to use the prop move

<draggable :list="list" :move="checkMove">

checkMove: function(evt){
  return evt.draggedContext.element.name === 'draggable element';
}

This checkMove function is called for each element in the list. if it returns true the element will be draggable and vice versa.

Likewise if you want to make the elements non draggable and fixed in its positions, draggable prop can be used. :draggable=".class-name". put the elements that you want to drag under the class .class-name. Rest of the elements will stay put in its place.

Aladdin