Draggable — это компонент Vue, основанный на Sortable.js, для реализации функции перетаскивания.
Подробности о Vue.Draggable можно посмотретьгитхаб-адрес
характеристика
- Поддержка сенсорных устройств
- Поддержка перетаскивания и выбора текста
- Поддержка умной прокрутки
- Поддержка перетаскивания между различными списками
- Не основан на jQuery
- Обновлять синхронно с моделью представления
- Совместимость с анимацией страны vue2
- Поддержка отмены операции
- Когда вам нужен полный контроль, вы можете отменить все изменения
- Совместимость с существующими компонентами пользовательского интерфейса
Установить
npm install vuedraggable
представлять
import draggable from 'vuedraggable'
Основное использование
Определите список строк json для реализации его сортировки методом перетаскивания.
<draggable v-model="list">
<transition-group>
<div v-for="element in list" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable>
Атрибуты
| параметр | иллюстрировать | Типы | По умолчанию |
|---|---|---|---|
| value | Список, используемый для реализации перетаскивания, обычно тот же массив, что и массив внутреннего цикла v-for. | Array | null |
| list | Эффект такой же, как и значение. Невозможно поделиться с v-моделью | Array | null |
| tag | Тип метки, отображаемой перетаскиваемой меткой после рендеринга | String | div |
| options | элемент конфигурации перетаскиваемого списка | Object | null |
| emptyInsertThreshold | Расстояние, на котором мышь должна находиться от пустого сортируемого объекта при перетаскивании | Number | 5 |
| clone | Клонировать, когда возвращаемое значение истинно, что можно понимать как обычное перетаскивание в копию. При вытягивании: «Функция обратного вызова перетаскивания при клонировании» | Function | нет лечения |
| move | Если не null, эта функция будет вызываться аналогично обратному вызову Sortable onMove. Возврат false отменит операцию перетаскивания. | Function | null |
| componentData | Используется для объединения компонентов пользовательского интерфейса, его можно понимать как передачу информации о настройке компонентов пользовательского интерфейса. | Object | null |
Примечание: атрибут options устарел в новой версии vuedraggable.Рекомендуется использовать атрибут v-bind в качестве элемента конфигурации.
элемент конфигурации опций
| параметр | иллюстрировать | Типы |
|---|---|---|
| group | Для группировки разные списки в одной группе можно перетаскивать друг к другу | String/Array |
| sort | Определяет, можно ли его перетаскивать или нет | Boolean |
| delay | Определяет время задержки, после которого выбранная мышью ячейка списка может начать перетаскивание | Number |
| disabled | Определяет, доступен ли этот сортируемый объект или нет | Boolean |
| animation | Единица времени анимации: мс | Number |
| handle | Сделайте элемент в ячейке списка, который соответствует селектору, маркером перетаскивания, а ячейку списка можно перетаскивать, только удерживая маркер перетаскивания. | Selector |
| filter | Определите, какие элементы списка нельзя перетаскивать, и для них можно установить несколько селекторов, разделенных знаком «,» | Selector |
| preventOnFilter | Следует ли вызывать event.preventDefault() при перетаскивании фильтра | Boolean |
| draggable | Определите, какие ячейки списка можно перетаскивать | Selector |
| ghostClass | При перетаскивании элемента списка копия будет создана как теневой элемент, чтобы имитировать сортировку перетаскиваемого элемента.Этот элемент конфигурации предназначен для добавления класса к теневому элементу. | Selector |
| chosenClass | Добавляется при выборе цели | Selector |
| dragClass | Добавлено во время перетаскивания цели | Selector |
| forceFallback | Если установлено значение true, родное перетаскивание html5 не будет использоваться, а стили некоторых элементов при перетаскивании могут быть изменены и т. д. | Boolean |
| резервный класс: | Когда для forceFallback установлено значение true, стиль ячейки, прикрепленной мышью, во время перетаскивания | String |
| dataIdAttr | data-id | Selector |
| scroll | Если контейнер сортировки представляет собой прокручиваемую область, перетаскивание может вызвать прокрутку этой области. | Boolean |
| scrollFn | Адаптация для пользовательских полос прокрутки | Function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) |
| ScrollSensitivity | Является ли мышь рядом с краем, чтобы начать прокрутку по умолчанию 30 | Number |
| scrollSpeed | скорость прокрутки | Number |
мероприятие
| параметр | иллюстрировать | параметр обратного вызова |
|---|---|---|
| start | Функция обратного вызова при начале перетаскивания | function({to, from, item, clone, oldIndex, newIndex}) |
| add | Функция обратного вызова при добавлении объекта | function({to, from, item, clone, oldIndex, newIndex}) |
| remove | Функция обратного вызова при перемещении ячейки в другой список | function({to, from, item, clone, oldIndex, newIndex}) |
| update | Функция обратного вызова при изменении порядка | function({to, from, item, clone, oldIndex, newIndex}) |
| end | Функция обратного вызова при завершении перетаскивания | function({to, from, item, clone, oldIndex, newIndex}) |
| choose | Функция обратного вызова при выборе ячейки | function({to, from, item, clone, oldIndex, newIndex}) |
| sort | Функция обратного вызова при изменении порядка | function({to, from, item, clone, oldIndex, newIndex}) |
| filter | Функция обратного вызова, которая пытается выбрать ячейку, отфильтрованную фильтром | function({to, from, item, clone, oldIndex, newIndex}) |
| clone | Функция обратного вызова при клонировании | function({to, from, item, clone, oldIndex, newIndex}) |
слот
Ни верхний, ни нижний колонтитулы не могут использоваться с tarnstion-group.
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>