Vue.Draggable
v2.24.3
Компонент Vue (Vue.js 2.0) или директива (Vue.js 1.0), позволяющий перетаскивание и синхронизацию с массивом модели представления.
Основан на Sortable.js и предлагает все его возможности.
См. vue.draggable.next.
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/
tag componentData Ищем сторонников!
Считаете этот проект полезным? Вы можете купить мне ☕ или ?
yarn add vuedraggable
npm i -S vuedraggableОстерегайтесь, что для Vue 2.0 его можно перетаскивать, а для версии 1.0 — нельзя.
< script src =" //cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js " > script >
< script src =" //cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js " > script >
< script src =" //cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js " > script >см. пример раздела
Используйте перетаскиваемый компонент:
< draggable v-model =" myArray " group =" people " @start =" drag=true " @end =" drag=false " >
< div v-for =" element in myArray " :key =" element.id " > {{element.name}} div >
draggable >файл .vue:
import draggable from 'vuedraggable'
. . .
export default {
components : {
draggable ,
} ,
...transition-group : < draggable v-model =" myArray " >
< transition-group >
< div v-for =" element in myArray " :key =" element.id " >
{{element.name}}
div >
transition-group >
draggable > Перетаскиваемый компонент должен напрямую обертывать перетаскиваемые элементы или transition-component содержащий перетаскиваемые элементы.
< 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 > < 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 > < draggable v-model =' myList ' > computed: {
myList : {
get ( ) {
return this . $store . state . myList
} ,
set ( value ) {
this . $store . commit ( 'updateList' , value )
}
}
} Тип: Array
Обязательно: false
По умолчанию: null
Входной массив для перетаскиваемого компонента. Обычно тот же массив, на который ссылается внутренний элемент директивы v-for.
Это предпочтительный способ использования Vue.draggable, поскольку он совместим с Vuex.
Его не следует использовать напрямую, а только через директиву v-model :
< draggable v-model =" myArray " > Тип: Array
Обязательно: false
По умолчанию: null
Альтернативой value list является массив, который можно синхронизировать с помощью перетаскивания.
Основное отличие состоит в том, что свойство list обновляется перетаскиваемым компонентом с использованием метода сращивания, тогда как value является неизменяемым.
Не используйте вместе со значением prop.
Новое в версии 2.19
Параметры сортировки можно установить непосредственно как реквизиты vue.draggable, начиная с версии 2.19.
Это означает, что все параметры сортировки являются допустимыми сортируемыми реквизитами, за заметным исключением всех методов, начинающихся с «on», поскольку перетаскиваемый компонент предоставляет один и тот же API через события.
Поддерживаются свойства kebab-case: например, реквизиты ghost-class будут преобразованы в сортируемый вариант ghostClass .
Пример дескриптора настройки, сортировки и опции группировки:
< draggable
v-model =" list "
handle =" .handle "
:group =" { name: 'people', pull: 'clone', put: false } "
ghost-class =" ghost "
:sort =" false "
@change =" log "
>
draggable > Тип: String
По умолчанию: 'div'
Тип узла HTML элемента, который перетаскиваемый компонент создает в качестве внешнего элемента для включенного слота.
Также можно передать имя компонента vue как элемент. В этом случае атрибут перетаскивания будет передан компоненту создания.
См. также компонентComponentData, если вам нужно установить реквизиты или события для созданного компонента.
Тип: Function
Обязательно: false
По умолчанию: (original) => { return original;}
Функция вызывает исходный компонент для клонирования элемента, когда опция клонирования имеет значение true. Уникальный аргумент — это элемент viewModel, который нужно клонировать, а возвращаемое значение — его клонированная версия.
По умолчанию vue.draggable повторно использует элемент viewModel, поэтому вам придется использовать этот хук, если вы хотите его клонировать или глубоко клонировать.
Тип: Function
Обязательно: false
По умолчанию: null
Если значение не равно нулю, эта функция будет вызываться аналогично обратному вызову Sortable onMove. Возврат false отменит операцию перетаскивания.
function onMoveCallback ( evt , originalEvent ) {
...
// return false; — for cancel
}Объект evt имеет то же свойство, что и событие Sortable onMove, и 3 дополнительных свойства:
draggedContext : контекст, связанный с перетаскиваемым элементом.index : индекс перетаскиваемого элементаelement : перетаскиваемый элемент, лежащий в основе элемента модели представления.futureIndex : потенциальный индекс перетаскиваемого элемента, если операция удаления принята.relatedContext : контекст, связанный с текущей операцией перетаскивания.index : индекс целевого элементаelement : элемент модели представления целевого элементаlist : целевой списокcomponent : целевой VueComponentHTML:
< draggable :list =" list " :move =" checkMove " >яваскрипт:
checkMove: function ( evt ) {
return ( evt . draggedContext . element . name !== 'apple' ) ;
}См. полный пример: Cancel.html, cancel.js.
Тип: Object
Обязательно: false
По умолчанию: null
Этот реквизит используется для передачи дополнительной информации дочернему компоненту, объявленному реквизитом тега.
Ценить:
props : реквизит, который будет передан дочернему компоненту.attrs : атрибуты, которые будут переданы дочернему компоненту.on : события, на которые нужно подписаться в дочернем компонентеПример (с использованием библиотеки элементов пользовательского интерфейса):
< 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
}
} ;
}
}Поддержка сортируемых событий:
start , add , remove , update , end , choose , unchoose выбор, sort , filter , clone
События вызываются всякий раз, когда onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone запускаются Sortable.js с тем же аргументом.
См. здесь для справки
Обратите внимание, что обратный вызов SortableJS OnMove сопоставляется с помощью свойства move.
HTML:
< draggable :list =" list " @end =" onEnd " >изменить событие
Событие change запускается, когда свойство списка не равно нулю и соответствующий массив изменяется из-за операции перетаскивания.
Это событие вызывается с одним аргументом, содержащим одно из следующих свойств:
added : содержит информацию об элементе, добавленном в массив.newIndex : индекс добавленного элемента.element : добавленный элементremoved : содержит информацию об элементе, удаленном из массива.oldIndex : индекс элемента перед удалением.element : удаленный элементmoved : содержит информацию об элементе, перемещенном внутри массива.newIndex : текущий индекс перемещенного элемента.oldIndex : старый индекс перемещенного элемента.element : перемещенный элементОграничение: ни один слот верхнего или нижнего колонтитула не работает в сочетании с переходной группой.
Используйте слот header , чтобы добавить неперетаскиваемый элемент внутри vuedraggable компонента. Важно: его следует использовать вместе с опцией перетаскивания, чтобы пометить перетаскиваемый элемент. Обратите внимание, что слот заголовка всегда будет добавляться перед слотом по умолчанию, независимо от его положения в шаблоне. Бывший:
< 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 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 >Дочерние элементы Vue.draggable всегда должны сопоставлять список или значение с помощью директивы v-for.
Дочерние элементы внутри v-for должны иметь ключи, как и любой элемент в Vue.js. Будьте осторожны, предоставляя соответствующие ключевые значения, в частности:
перетаскиваемый пример
Смотрите здесь
