Introduction
Vue.Draggable is a vue drag-and-drop plugin based on Sortable.js. Supports mobile devices, dragging and selecting text, smart scrolling, can drag and drop between different lists, does not rely on jQuery as the basis, is compatible with vue 2 transition animations, and supports undo operations. In short, it is a very good The vue drag and drop component. This article will introduce how to build the environment and simple examples. It is very simple to use and has no special requirements for CSS styles for dragged elements.
Official website
https://github.com/SortableJS/Vue.Draggable
npm or yarn installation method
yarn add vuedraggable
npm i -S vuedraggable
UMD browser directly references JS method
Attribute Description
| Attribute name | Description |
|---|---|
| group | :group= “name”, the same group can drag each other Or { name: “…”, pull: [true, false, ‘clone’, array , function], put: [true, false, array , function] } |
| sort | :sort=”true”, whether to enable internal sorting, if set to false, its group Unable to sort, you can drag and sort in other groups |
| delay | :delay=”0″, how long the mouse can be dragged after being pressed |
| touchStartThreshold | How much px the mouse moves to drag the element |
| disabled | :disabled=”true”, whether to enable dragging components |
| animation | The animation effect when dragging is still cool, digital type. For example, setting animation=1000 means 1 second transition animation effect |
| handle | :handle=”.mover” can only be dragged when the mouse moves to the element whose css is the mover class |
| filter | :filter=”.unmover” Elements with unmover style are not allowed to drag |
| draggable | :draggable=”.item” Those elements can be dragged |
| ghostClass | :ghostClass=”ghostClass” Set the placeholder class name of the drag element, Your custom style may need to add !important to take effect, and set the forceFallback attribute to true |
| chosenClass | :ghostClass=”hostClass” The style of the selected target, your custom style may Need to add !important to take effect, and set the forceFallback attribute to true |
| dragClass | :dragClass=”dragClass” Drag the style of the element, your custom style may need to add !important to take effect , and set the forceFallback attribute to true |
| dataIdAttr | dataIdAttr: ‘data-id’ |
| forceFallback | The default is false, ignoring the drag behavior of HTML5, because There is an attribute in h5 that can also be dragged. When you want to customize the style of ghostClass chosenClass dragClass, it is recommended to set forceFallback to true |
| fallbackClass | default false, the class name of the cloned DOM element |
| allbackOnBody | The default is false, the cloned element is added to the body of the document |
| fallbackTolerance | px that should be moved before dragging |
| scroll | The default is true, whether there is a scrolling area to allow dragging |
| scrollFn | Scroll callback function |
| scrollSensitivity | How far away from the scrolling area, scrolling the scrollbar |
| scrollSpeed | Scroll speed |
Complete example
html
<div id="app">
<div>{<!-- -->{drag?'drag':'drag stop'}}</div>
<draggable v-model="myArray" chosen-class="chosen" force-fallback="true" group="people" animation="1000"
@start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="element in myArray" :key="element.id">{<!-- -->{element.name}}</div>
</transition-group>
</draggable>
</div>
css
.item {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
&:hover {
background-color: #f1f1f1;
cursor: move;
}
}
.chosen {
border: solid 2px #3089dc !important;
}
js
// Global registration component
new Vue({
el: '#app',
data() {
return {
drag: false,
myArray: [
{ people: 'cn', id: 1, name: 'www.itxst.com', sort: false },
{ people: 'cn', id: 2, name: 'www.baidu.com' },
{ people: 'cn', id: 3, name: 'www.taobao.com' },
{ people: 'us', id: 4, name: 'www.google.com' }
]
};
},
methods: {
onStart() {
this. drag = true;
},
onEnd() {
this. drag = false;
}
}
})
Results
Try online
Drag between two or more columns
As a powerful Vue dragging component, vue.draggable can meet the dragging requirements for elements on the web page. This article will introduce two or more columns to drag each other, such as dragging certain roles or users to Each permission group achieves some cool effects.
Key point group attribute
//The two columns of components can be dragged to each other by setting the same group name
<draggable v-model="arr1" group="site">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id">{<!-- -->{item.name}}</div>
</transition-group>
</draggable>
//group attribute:
//Setting method 1, directly set the group name
group:'itxst'
//Setting method, object, you can also implement complex logic through custom functions
group: {
name:'itxst',//The group name is itxst
pull:true|false|function,//Whether to allow dragging into the current group
put:true|false|function,//Whether to allow to drag out the current group
}
try it online
The problem of dragging into an empty array
//When an array is empty, you need to set the height of the transition-group to drag into this empty array
//style is equal to min-height:120px;display: block;
<draggable v-model="arr2" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
<transition-group:style="style">
<div class="item" v-for="item in arr2" :key="item.id">{<!-- -->{item.name}}</div>
</transition-group>
</draggable>
try it online
Control group A can only be dragged out but not in
<draggable v-model="arr1" :group="grpupA" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd" >
<transition-group:style="style">
<div class="item" v-for="item in arr1" :key="item.id">{<!-- -->{item.name}}</div>
</transition-group>
</draggable>
//Setting: group="grpupA" can only be dragged out
grpupA:{
name: 'site',
pull: true,
put: false
}
try it online
Complete code
<template>
<div>
<!--Use draggable components-->
<div class="itxst">
<div class="col">
<div class="title" >Drag and drop the following elements to Group B to try</div>
<draggable v-model="arr1" :group="groupA" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
<transition-group:style="style">
<div class="item" v-for="item in arr1" :key="item.id">{<!-- -->{item.name}}</div>
</transition-group>
</draggable>
</div>
<div class="col">
<div class="title" >Group B (this group is an empty array)</div>
<draggable v-model="arr2" :group="groupB" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
<transition-group:style="style">
<div class="item" v-for="item in arr2" :key="item.id">{<!-- -->{item.name}}</div>
</transition-group>
</draggable>
</div>
</div>
</div>
</template>
<script>
//Import the draggable component
import draggable from 'vuedraggable'
export default {
//Register draggable component
components: {
draggable,
},
data() {
return {
drag: false,
groupA:{
name: 'site',
pull: true, //can be dragged from
put:true//can be dragged out
},
groupB:{
name: 'site',
pull: true,
put:true
},
//Define the array of objects to be dragged
arr1:[
{id:1,name:'www.itxst.com'},
{id:2,name:'www.jd.com'},
{id:3,name:'www.baidu.com'},
{id:3,name:'www.taobao.com'}
],
arr2:[], //empty array
//The style of the empty array, this style can only be dragged in
style:'min-height:120px;display: block;'
};
},
methods: {
// start drag event
onStart(){
this.drag=true;
},
//drag end event
onEnd() {
this.drag=false;
},
},
};
</script>
<style scoped>
/* Define the style of the element to be dragged */
.ghostClass{
background-color: blue !important;
}
.chosenClass{
background-color: red !important;
opacity: 1!important;
}
.dragClass{
background-color: blueviolet !important;
opacity: 1 !important;
box-shadow:none !important;
outline:none !important;
background-image:none !important;
}
.itxst{
margin: 10px;
}
.title{
padding: 6px 12px;
}
.col{
width: 40%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col + .col{
margin-left: 10px;
}
.item{
padding: 6px 12px;
margin: 0px 10px 0px 10px;
border: solid 1px #eee;
background-color: #f1f1f1;
}
.item:hover{
background-color: #fdfdfd;
cursor: move;
}
.item + .item{
border-top: none;
margin-top: 6px;
}
</style>
Reference Documentation
vue.draggable Chinese documentation – itxst.com
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge