target list
— component: target VueComponent

HTML:

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

JavaScript:

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

См. полный пример: Cancel.html, cancel.js

componentData

Тип: Object

Обязательный: false

По умолчанию: null

Этот реквизит используется для передачи дополнительной информации дочернему компоненту, объявленному тегом props (#tag).

Значение:

• props: реквизиты, которые будут переданы дочернему компоненту;
• attrs: атрибуты, которые будут переданы дочернему компоненту;
• on: события, на которые будет подписываться дочерний компонент.

Пример (с использованием библиотеки element UI):

<draggable tag="el-collapse" :list="list" :component-data="getComponentData()">
    <el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name">
        <div>{{e.description}}</div>
     </el-collapse-item>
</draggable>

methods: {
    handleChange() {
      console.log('changed');
    },
    inputChanged(value) {
      this.activeNames = value;
    },
    getComponentData() {
      return {
        on: {
          change: this.handleChange,
          input: this.inputChanged
        },
        attrs:{
          wrap: true
        },
        props: {
          value: this.activeNames
        }
      };
    }
  }

События

Поддержка событий Sortable:
start, add, remove, update, end, choose, unchoose, sort, filter, clone

События вызываются всякий раз, когда onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone запускаются Sortable.js с тем же аргументом.

См. здесь для справки (https://github.com/RubaXa/Sortable#event-object-demo)

Обратите внимание, что обратный вызов SortableJS OnMove сопоставляется с опорой move (https://github.com/SortableJS/Vue.Draggable/blob/master/README.md#move).

HTML:

<draggable :list="list" @end="onEnd">  

Событие change запускается, когда prop списка не равен нулю и соответствующий массив изменяется из-за операции перетаскивания.

Это событие вызывается с одним аргументом, содержащим одно из следующих свойств:
— added: содержит информацию об элементе, добавленном в массив;
— newIndex: индекс добавленного элемента;
— element: добавленный элемент;
— removed: содержит информацию об элементе, удалённом из массива;
— oldIndex: индекс элемента перед удалением;
— element: удалённый элемент;
— moved: содержит информацию о перемещённом элементе;
— newIndex: текущий индекс перемещённого элемента;
— oldIndex: старый индекс перемещённого элемента;
— element: перемещённый элемент.

Слоты

Ограничение: ни слот заголовка, ни слот нижнего колонтитула не работают вместе с transition-group.

Заголовок

Используйте слот header, чтобы добавить неперемещаемый элемент внутри компонента vuedraggable.
Важно: его следует использовать вместе с опцией 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>
</draggable>

Нижний колонтитул

Используйте слот footer, чтобы добавить неперемещаемый элемент внутри компонента vuedraggable.
Важно: его следует использовать вместе с опцией draggable для пометки перетаскиваемых элементов.
Обратите внимание, что слот нижнего колонтитула всегда будет добавляться после слота по умолчанию независимо от его положения в шаблоне.
Пример:

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>

Gotchas

Здесь текст обрывается. Элементы Vue.draggable children всегда должны отображать список или свойство value с помощью директивы v-for.

• Вы можете использовать слоты header и footer, чтобы обойти это ограничение (https://github.com/SortableJS/Vue.Draggable#header, https://github.com/SortableJS/Vue.Draggable#footer).

— Элементы внутри v-for должны быть помечены как ключевые, как и любой элемент в Vue.js. Будьте осторожны при предоставлении соответствующих значений ключей: * обычно предоставление индекса массива в качестве ключа не будет работать, так как ключ должен быть связан с содержимым элементов; * клонированные элементы должны предоставлять обновлённые ключи, это можно сделать, например, используя clone props.

Пример

• Clone: https://sortablejs.github.io/Vue.Draggable/#/custom-clone.
• Handle: https://sortablejs.github.io/Vue.Draggable/#/handle.
• Transition: https://sortablejs.github.io/Vue.Draggable/#/transition-example-2.
• Nested: https://sortablejs.github.io/Vue.Draggable/#/nested-example.
• Table: https://sortablejs.github.io/Vue.Draggable/#/table-example.

Полный демонстрационный пример

Draggable example: https://github.com/David-Desmaisons/draggable-example.

Для Vue.js 1.0

См. здесь: documentation/Vue.draggable.for.ReadME.md.