1.Official documents
2. Installation
```
yarn add vuedraggable
npm i -S vuedraggable
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
```
3. Other components:
sortablejs.js dragging
unofficial documents
npm install sortablejs --save
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.3/Sortable.min.js"></script>
4.Attribute description
| Property name | illustrate |
|---|---|
| group | :group= "name", the same groups can be dragged to 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, the group it belongs to cannot be sorted, and other groups can be dragged and sorted. |
| delay | :delay= “0”, how long after the mouse is pressed to drag |
| touchStartThreshold | How many px must the mouse move to drag the element? |
| disabled | :disabled= “true”, whether to enable drag-and-drop 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 an element whose css is mover class. |
| filter | :filter=".unmover" Elements with unmover style set do not allow dragging |
| 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 element style, 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 dragging behavior of HTML5, because there is an attribute in h5 that can also be dragged. When you want to customize the ghostClass chosenClass dragClass style, it is recommended to set forceFallback to true. |
| fallbackClass | Default is false, the class name of the cloned DOM element |
| allbackOnBody | Default is false, the cloned element is added to the body of the document |
| fallbackTolerance | The px that should be moved before dragging |
| scroll | Default is true, whether the scroll area allows dragging |
| scrollFn | scroll callback function |
| scrollSensitivity | How far away from the scroll area is to scroll the scroll bar |
| scrollSpeed | scroll speed |
5. Case:
<template>
<div>
<!-- handle=".mover" mover的calss才可以拖动 -->
<!-- draggable=".moveItem" moveItem的calss才可以换位置 -->
<!-- filter=".undraggable" undraggable的class禁止拖拽 -->
<!-- group="people" people这一组里面的可以拖拽 -->
<draggable v-model="myArray" chosen-class="chosen" force-fallback="true" handle=".mover" draggable=".moveItem" filter=".undraggable" group="people" animation="1000">
<transition-group>
<div v-for="element in myArray" :key="element.id" class="item" :class="[element.class]">
<div v-if="element.class=='moveItem'" class="btnMove mover" />
<div v-else class="btnMove1" />
<div>{
{ element.name }}</div>
</div>
</transition-group>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data() {
return {
myArray: [
{
people: 'cn', id: 1, name: 'www.itxst.com', class: 'moveItem' },
{
people: 'cn', id: 2, name: 'www.baidu.com', class: 'moveItem' },
{
people: 'cn', id: 3, name: 'www.taobao.com', class: 'moveItem' },
{
people: 'us', id: 4, name: 'www.google.com', class: 'undraggable' }
]
}
},
watch: {
myArray(value) {
console.log(value)
}
}
}
</script>
<style lang="scss" scoped>
.item{
cursor: pointer;
line-height: 30px;
display: flex;
align-items: center;
user-select: none;
margin-top: 10px;
.btnMove{
width: 30px;
height: 40px;
background-image: url('~@/assets/img/moverImg.png');
background-repeat: no-repeat;
background-position: center center;
cursor: move;
display: inline-block;
}
.btnMove1{
width: 30px;
height: 40px;
display: inline-block;
}
}
</style>