Vue.Draggable learning summary

Draggable vue based Sortable.js the assembly, to achieve drag and drop.

characteristic

Support for touch devices
support drag and select the text
with smart scrolling
supports drag and drop between the different lists
not to jQuery-based
and synchronized view model refresh
and vue2 kingdom animated compatible
support for undo operations
when needed full control, you can throw all changes
It can be compatible with existing UI components

installation

npm install vuedraggable

Introduced

import draggable from 'vuedraggable'

Official Examples:
hello.vue

<template>
  <div class="fluid container"> <div class="form-group form-group-lg panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Sortable control</h3> </div> <div class="panel-body"> <div class="checkbox"> <label><input type="checkbox" v-model="editable">Enable drag and drop</label> </div> <button type="button" class="btn btn-default" @click="orderList">Sort by original order</button> </div> </div> <div class="col-md-3"> <draggable class="list-group" element="ul" v-model="list" :options="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false"> <transition-group type="transition" :name="'flip-list'"> <li class="list-group-item" v-for="element in list" :key="element.order"> <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i> {{element.name}} <span class="badge">{{element.order}}</span> </li> </transition-group> </draggable> </div> <div class="col-md-3"> <draggable element="span" v-model="list2" :options="dragOptions" :move="onMove"> <transition-group name="no" class="list-group" tag="ul"> <li class="list-group-item" v-for="element in list2" :key="element.order"> <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i> {{element.name}} <span class="badge">{{element.order}}</span> </li> </transition-group> </draggable> </div> <div class="list-group col-md-3"> <pre>{{listString}}</pre> </div> <div class="list-group col-md-3"> <pre>{{list2String}}</pre> </div> </div> </template> <script> import draggable from "vuedraggable"; const message = [ "vue.draggable", "draggable", "component", "for", "vue.js 2.0", "based", "on", "Sortablejs" ]; export default { name: "hello", components: { draggable }, data() { return { list: message.map((name, index) => { return { name, order: index + 1, fixed: false }; }), list2: [], editable: true, isDragging: false, delayedDragging: false }; }, methods: { orderList() { this.list = this.list.sort((one, two) => { return one.order - two.order; }); }, onMove({ relatedContext, draggedContext }) { const relatedElement = relatedContext.element; const draggedElement = draggedContext.element; return ( (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed ); } }, computed: { dragOptions() { return { animation: 0, group: "description", disabled: !this.editable, ghostClass: "ghost" }; }, listString() { return JSON.stringify(this.list, null, 2); }, list2String() { return JSON.stringify(this.list2, null, 2); } }, watch: { isDragging(newValue) { if (newValue) { this.delayedDragging = true; return; } this.$nextTick(() => { this.delayedDragging = false; }); } } }; </script> <style> .flip-list-move { transition: transform 0.5s; } .no-move { transition: transform 0s; } .ghost { opacity: 0.5; background: #c8ebfb; } .list-group { min-height: 20px; } .list-group-item { cursor: move; } .list-group-item i { cursor: pointer; } </style> 

main.js

import Vue from "vue";
import App from "./App.vue"; import "bootstrap/dist/css/bootstrap.css"; import "font-awesome/less/font-awesome.less"; Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount("#app"); 

Properties and methods Description

Attributes

value

Array, non-essential, the default is null

For implementing drag list, and an inner generally circular array of v-for the same array.
To achieve the best use vuex passed.
It is not used directly, but is introduced by v-model.

<draggable v-model="myArray"> 

list

Array, non-essential, the default is null

Is the value of alternatives.
And v-model can not be shared
from the performance did not see the difference

element

String, default div

Is <draggable> tag to show up after rendering the tag type
external label also contains a list of drag and slots
that can be used is compatible with UI components

options

Object

CI
group: string or array of packets with different list can drag the same group each
sort: boolean Whether the definition can drag
delay: number list is selected custom mouse drag unit may start delay time
touchStartThreshold: number (unclear)
disabled: boolean whether define this sortable objects is available, is not subject to true sortable drag sorting functions
Store:
animation: Umber unit: ms animation time
handle: selector css selector simple format string, so that the list of units that match selector element becomes the drag handle, the handle can only hold the drag that the drag unit listing
filter: selector css simple format selector string defining the list of cells which can not drag and drop, may be provided to a plurality of selector, with the middle "," separated
preventOnFilter: when the event.preventDefault whether to trigger a drag filter () default triggers
draggable: selector css simple format selector string defining the list of cells which can drag and drop
ghostClass: selector format css selector simple string, when drag the column When the unit will generate a copy as a sub-unit to simulate the sort of dragged unit, this configuration item is to give the sub-unit add a class, we can edit the style this way to shadow elements
chosenClass: selector format when selected simply add css selector string target
dragClass: selector css simple format selector string, the target is added during the drag
forceFallback: boolean When set to true, the native without dragging and dropping html5 may modify some elements in other styles drag
fallbackClass: when forceFallback string when set to true, the attachment unit during drag and drop style mouse
dataIdAttr: Data-ID
scroll: Boolean when the container is sorted scrollable area, may cause drag area scroll
scrollFn: function (offsetX, offsetY, originalEvent , touchEvt,) {...} used to customize the scroll bar adapted hoverTargetEl
the scrollSensitivity: mouse Number is far closer to the edge rolling by default start 30
the scrollSpeed: Number scroll speed

Configuration function

setData: callback function setting value
onChoose: callback function selection unit
onStart: callback function at the start of the drag
onEnd: callback function at the end of the drag
onAdd: callback function when the adding unit
callback sort changes: onUpdate function
onRemove: callback function unit is moved to another list
onFilter: try to select a filter unit filtered callback
onMove: callback function when the mobile unit
onClone: clone callback function of
the properties of the above function object:
to: the container is moved to the list
from: source list container
item: the mobile unit
clone: unit copies
oldIndex: No. before movement
newIndex: the mobile number

clone

function, default: no treatment

This is an item to be combined with the process group entries pull options when pull: 'drag callback function of clone'
is meant clones.
It can be understood as a normal drag and drop into a copy.
When true clone

move

function, the default value: null

Function is called when a drag items
used to determine whether the entry into force of the drag
can take effect return null
can be determined by a function
having a parameter: EVT
EVT is Object
draggedContext: element is dragged context
index: dragging the pointer element
element: dragging pull data itself
futureIndex: index after dragging
relatedContext: drag context area
index: index of the target element
element: the target data itself
list: a list of drag
component: target component

<draggable element="ul" v-model="list" :move='allow'> ... methods: { allow(evt) { console.log(evt.draggedContext.index) console.log(evt.draggedContext.element) console.log(evt.draggedContext.futureIndex) console.log(evt.relatedContext.index) console.log(evt.relatedContext.element) console.log(evt.relatedContext.list) console.log(evt.relatedContext.component) return (evt.draggedContext.element.name!== 'b') } }

componentData

Object, default value: null

Used to bind UI components, it can be understood as a proxy of the custom UI component information
contains two: props and ON
props for Agent Properties UI components need to bind (:)
ON for the event broker UI components need to bind ( @)

<draggable element="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 }, props: { value: this.activeNames } }; } } 

event

There are several
start, add, remove, update, end, choose, sort, filter, clone

Parameters with the following properties:

add: contains the list of elements to be added
newIndex: after addition of the new index
element: element to be added
removed: remove from the list of elements
oldIndex: index before removing
element: the removed elements
moved: moving inside
newIndex: index after the change
oldIndex: change the index of the previous
element: the moving element
slot
to provide a footer slot, under the sorted list.
Always located at the bottom.

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

Reprinted: https://www.jianshu.com/p/382ac5f9d6ff