Как отключить перетаскивание на конкретном элементе с помощью 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

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

https://github.com/RubaXa/Sortable
handle Вариант тут должен помочь.

Answer 2

Начиная с версии 2.19 можно использовать

<draggable handle=".handle">

Answer 3

Здесь можно перетаскивать только элементы с классом "item", которые можно указать, как это draggable = ". Item", используя опцию перетаскивания внутри перетаскиваемого тега.

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

можешь использовать :not()селектор для определенного элемента для группы из нескольких элементов

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

Answer 5

Вы должны передать реквизит в перетаскиваемом компоненте.

Пример:

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

Для получения дополнительной информации здесь все сортируемые параметры