Draggable is a Vue component based on sortable. js, used to implement drag and drop functions. See the Github address for more information about vue. Draggable

features

  • Support for touch devices
  • Support for dragging and selecting text
  • Intelligent scrolling
  • Supports drag and drop between different lists
  • Not based on jQuery
  • Sync refresh with the viewmodel
  • Compatible with vue2’s national animation
  • Support undo operation
  • When complete control is required, all changes can be thrown
  • Can be compatible with existing UI components

The installation

npm install vuedraggable

The introduction of

import draggable from 'vuedraggable'

Basic usage

Define a JSON string list to implement a drag and drop sort.

<draggable v-model="list">
    <transition-group>
        <div v-for="element in list" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>
Copy the code

attribute

parameter instructions type The default value
value The list used to implement drag is usually the same array as the internal V-for loop Array null
list The effect is the same as value. Cannot be shared with the V-Model Array null
tag Draggable Specifies the type of tag to display after rendering String div
options Draggable List configuration item Object null
emptyInsertThreshold The distance between the mouse and an empty sortable object when dragging Number 5
clone When the return value is true, cloning can be interpreted as normal drag and drop becoming copy. When pull:’clone drag callback ‘ Function No processing
move If not empty, the function is called in a manner similar to the Sortable onMove callback. Returning false cancels the drag operation. Function null
componentData Used to combine UI components, can be interpreted as proxy UI component customization information Object null

Note: The options attribute is deprecated in the new version of VueDraggable. It is recommended to use the V-bind attribute as the configuration item

The options configuration items

parameter instructions type
group For grouping, different lists in the same group can be dragged from one another String/Array
sort Defines whether drag and drop is allowed Boolean
delay Defines the delay at which a mouse select list unit can begin dragging Number
disabled Defines whether this sortable object is available Boolean
animation Animation time unit :ms Number
handle Make the element in the list cell that matches the selector a drag handle. The list cell can only be dragged by holding down the drag handle Selector
filter Defines which list units cannot be dragged and dropped. You can set them to multiple selectors separated by commas Selector
preventOnFilter Whether event.preventDefault() fires when dragging filter By default Boolean
draggable Defines which list cells can be dragged and dropped Selector
ghostClass This configuration item adds a class to a shadow unit that generates a copy of the dragged unit as a shadow unit to simulate the sorting of the dragged unit Selector
chosenClass Added when the target is selected Selector
dragClass Added during target drag Selector
forceFallback If set to true, native HTML5 drag-and-drop will not be used, you can modify the style of some drag-and-drop elements, etc Boolean
FallbackClass: When forceFallback is set to true, the style of the mouse attached to the cell during drag and drop String
dataIdAttr data-id Selector
scroll When the sorted container is a scrollable region, drag and drop can cause the region to scroll Boolean
scrollFn Adaptation for custom scroll bars Function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl)
ScrollSensitivity Is the mouse close to the edge of how far to start scrolling default 30 Number
scrollSpeed The scrolling speed Number

The event

parameter instructions The callback parameter
start The callback function to start dragging Function ({the to, from, item, clone, oldIndex, newIndex})
add A callback function to add a unit Function ({the to, from, item, clone, oldIndex, newIndex})
remove A callback function when a unit is moved to another list Function ({the to, from, item, clone, oldIndex, newIndex})
update A callback function when sorting changes Function ({the to, from, item, clone, oldIndex, newIndex})
end Drag the end of the callback function Function ({the to, from, item, clone, oldIndex, newIndex})
choose The callback function when selecting a cell Function ({the to, from, item, clone, oldIndex, newIndex})
sort A callback function when sorting changes Function ({the to, from, item, clone, oldIndex, newIndex})
filter Try to select a callback function for the cell filtered by filter Function ({the to, from, item, clone, oldIndex, newIndex})
clone Clone callback function Function ({the to, from, item, clone, oldIndex, newIndex})

slot

Neither header nor footer slots can be used with tarnstion-group.

Header

Use the title slot to add non-draggable elements to the VueDraggable component. It should be used with the Draggable option to mark the draggable element. Note that no matter where the title slot is in the template, it is always added before the default slot.

<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>
Copy the code

Footer

Use the footer slot to add non-draggable elements to the VueDraggable component. It should be used with the Draggable option to mark the draggable element. Note that no matter where the footer slot is in the template, it will always be added after the default slot.

<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>
Copy the code