Extremely detailed summary of using the document

Preface

Draggable is a vue component based on it to implement drag and drop function.

For more information, please viewgithub address

characteristic

Support touch devices
Support drag and drop and text selection
Supports smart scrolling
Support dragging and dropping between different lists
Not based on jQuery
Refresh synchronously with the view model
Compatible with vue2's Country Animation
Support undo operation
All changes can be thrown when full control is required
Compatible with existing UI components

Install

npm install vuedraggable

Introduced

import draggable from 'vuedraggable'

Basic usage

Define a list of json strings to implement its drag-and-drop sorting.

<draggable v-model="list">
    <transition-group>
        <div v-for="element in list" :key="">
            {{}}
        </div>
    </transition-group>
</draggable>

property

parameter	illustrate	type	default value
value	Used to implement drag and drop list, usually the same array as the internal v-for loop	Array	null
list	The effect is the same value. It cannot be shared with v-model	Array	null
tag	The type of tag that the draggable tag appears after rendering	String	div
options	draggable list configuration item	Object	null
emptyInsertThreshold	When dragging, the distance between the mouse and the empty sortable object	Number	5
clone	When the return value is true, it can be understood that normal dragging becomes copying. When pull:'clone'	Function	No processing
move	If not empty, this function will be called in a similar way to the Sortable onMove callback. Returning false will cancel the drag operation.	Function	null
componentData	It is used to combine UI components, which can be understood as proxying the custom information of UI components.	Object	null

Note: The options attribute is abandoned in the new version of vuedraggable, and it is recommended to use the v-bind attribute as the configuration item.

options configuration item

parameter	illustrate	type
group	For grouping, different lists of the same group can be dragged against each other.	String/Array
sort	Define whether it is possible to drag and drop	Boolean
delay	Define the delay time when the mouse selects the list unit to start dragging	Number
disabled	Define whether this sortable object is available	Boolean
animation	Animation time Unit: ms	Number
handle	Make the elements in the list unit that match the selector become a drag handle. Only by holding down the drag handle can the list unit be dragged	Selector
filter	Define which list units cannot be dragged and dropped, can be set as multiple selectors, separated by "," in the middle	Selector
preventOnFilter	Whether to trigger () when dragging filter?	Boolean
draggable	Define which list units can be dragged and dropped	Selector
ghostClass	When dragging a list unit, a copy will be generated as a shadow unit to simulate the sorting of the dragged units. This configuration item is to add a class to this shadow unit.	Selector
chosenClass	Added when the target is selected	Selector
dragClass	Added during target dragging	Selector
forceFallback	If set to true, the native html5 drag and drop will not be used. You can modify the style of some elements in drag and drop, etc.	Boolean
fallbackClass：	When forceFallback is set to true, the style of the mouse attaching unit during drag and drop	String
dataIdAttr	data-id	Selector
scroll	When the sorted container is a scrollable area, drag and drop can cause the area to scroll	Boolean
scrollFn	Adaptation for custom scrollbars	Function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl)
ScrollSensitivity	It is how far the mouse is close to the edge and starts scrolling.	Number
scrollSpeed	Scroll speed	Number

event

parameter	illustrate	Callback parameters
start	Callback function when starting to drag	function（{to,from,item,clone,oldIndex,newIndex})
add	Callback function when adding a unit	function（{to,from,item,clone,oldIndex,newIndex})
remove	Callback function when a unit is moved to another list	function（{to,from,item,clone,oldIndex,newIndex})
update	Callback function when sorting changes	function（{to,from,item,clone,oldIndex,newIndex})
end	Callback function at the end of dragging	function（{to,from,item,clone,oldIndex,newIndex})
choose	Callback function when selecting a unit	function（{to,from,item,clone,oldIndex,newIndex})
sort	Callback function when sorting changes	function（{to,from,item,clone,oldIndex,newIndex})
filter	Try to select a callback function for a cell that is filtered by filter	function（{to,from,item,clone,oldIndex,newIndex})
clone	Callback function when clone	function（{to,from,item,clone,oldIndex,newIndex})

Slot

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

Header

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

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

Footer

Use footer slots to add non-dragable elements in 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 located 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="" class="item">
        {{}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>

Summarize

This is all about this article about using the document. For more relevant contents of using the document, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!