vue拖拽排序插件vuedraggable的使用 附原生使用方法

Vue中使用

先下载依赖：

?

1	npm install vuedraggable -S

　　项目中引入

import draggable from 'vuedraggable'

注册

?

1 2 3

components: {     draggable },

　　demo：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

<template>     <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">             <transition-group>                 <div v-for="element in colors" :key="element.text" class = "drag-item">                     {{element.text}}                 </div>             </transition-group>     </draggable> </template>   <script>     import draggable from 'vuedraggable'     export default{         data(){             return{                 msg:"这是测试组件",                 colors: [                     {                         text: "Aquamarine",                     },                     {                         text: "Hotpink",                     },                     {                         text: "Gold",                     },                     {                         text: "Crimson",                     },                     {                         text: "Blueviolet",                     },                     {                         text: "Lightblue",                     },                     {                         text: "Cornflowerblue",                     },                     {                         text: "Skyblue",                     },                     {                         text: "Burlywood",                     }                 ],                 startArr:[],                 endArr:[],                 count:0,             }         },         components: {         　　draggable         },         methods:{             getdata (evt) {                 console.log(evt.draggedContext.element.text)             },             datadragEnd (evt) {                 evt.preventDefault();                 console.log('拖动前的索引 :' + evt.oldIndex)                 console.log('拖动后的索引 :' + evt.newIndex)                 console.log(this.colors);             }         },         mounted () {             //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效             document.body.ondrop = function (event) {                 event.preventDefault();                 event.stopPropagation();             }         }     } </script>   <style lang="scss" scoped>     .test{         border:1px solid #ccc;     }     .drag-item{         width: 200px;         height: 50px;         line-height: 50px;         margin: auto;         position: relative;         background: #ddd;         margin-top:20px;     }     .ghostClass{         opacity: 1;     }     .bottom{         width: 200px;         height: 50px;         position: relative;         background: blue;         top:2px;         left: 2px;         transition: all .5s linear;     } </style>

　　

 

原生方法使用

?

1 2 3 4 5 6 7 8 9

<transition-group tag="div" class="container">   <div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.color,width:'80px',height:'80px'}"     draggable="true"   @dragstart="handleDragStart($event, item)"     @dragover.prevent="handleDragOver($event, item)"     @dragenter="handleDragEnter($event, item)"     @dragend="handleDragEnd($event, item)" >   </div> </transition-group>

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<script> export default {  name: 'Toolbar',  data () {   return {    items: [     { key: 1, color: '#ffebcc'},     { key: 2, color: '#ffb86c'},     { key: 3, color: '#f01b2d'}    ],            dragging: null   }  },  methods:{   handleDragStart(e,item){     this.dragging = item;   },   handleDragEnd(e,item){     this.dragging = null   },   //首先把div变成可以放置的元素，即重写dragenter/dragover   handleDragOver(e) {     e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!   },   handleDragEnter(e,item){     e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件     if(item === this.dragging){       return     }     const newItems = [...this.items]     console.log(newItems)     const src = newItems.indexOf(this.dragging)     const dst = newItems.indexOf(item)         newItems.splice(dst, 0, ...newItems.splice(src, 1))         this.items = newItems   }  } } </script>     <style scoped>   .container{     width: 80px;     height: 300px;     position: absolute;     left: 0;     display:flex;     flex-direction: column;     padding: 0;   }   .item {    margin-top: 10px;    transition: all linear .3s   }