vue中实现拖拽调整顺序功能

使用  vuedraggable 组件 或 vue-dragging 指令方式 实现 拖拽调整顺序功能。

使用组件： vuedraggable

vuedraggable + transition-group ,组合使用效果更奈斯哦
使用方式：
   1、先安装  npm install vuedraggable
   2、使用全局注册 或者 哪个页面使用就引入哪个页面也可。 
      import vuedraggable from 'vuedraggable'
      注意一点：在使用的时候，可以通过v-model来双向绑定本地data，如果需要更新或者是触发父组件监听的事件，可以在
      updated() 中去 emit 。

index.vue 页面：
<template>
  <div class="app-container">
     <vuedraggable class="wrapper" v-model="list">
        <transition-group>
           <div class="detail" v-for="item in list" :key="item">{{item}}</div>
        </transition-group>
     </vuedraggable>
  </div>
</template>

<script>
  import vuedraggable from 'vuedraggable'
  export default{
    name:'index',
    data(){
      return{
        list:[1,2,3,4,5,6,7,8,9,10],
      }
    },
    components:{
      vuedraggable
    },
    updated(){
      console.log(this.list)
    }
  }
</script>
<style lang="scss">
  .app-container{
    width:400px;
    .wrapper{
       display:flex;
       justify-content:center;
       align-items:center;
       width:100%;
       .detial{
         width:100%;
         height:50px;
         line-height:50px;
         background-color:#42b983;
         margin-bottmo:20px;
       }
    }
  }
</style>
效果图展示：

使用 awe-dnd 方式：

vue-dragging 的 npm 包的名字是 awe-dnd,这个库主要是封装了 v-dragging 全局指令，然后通过全局指令
去数据绑定等。
与 vuedraggable相比，awe-dnd 是没有双向绑定的，因此提供了事件，在拖拽结束的时候用来跟新列表或者是去触发父组件
监听的事件。

安装依赖： 
   npm install awe-dnd --save

main.js 文件：
   import VueDND from 'awe-dnd'
   Vue.use(VueDND);

index.vue 界面：
   <template>
      <div class="app-container">
         <div class="color-content">
           <div class="color-detail" v-for="color in colors" :key="color.id"
           v-dragging="{item:color,list:colors,group:'color'}" 
           :style="{'background-color':color.bgColor}">{{color.text}}</div>
         </div>
      </div>
   </tempalte>
   <script>
      export default{
         name:'index',
         data(){
           return{
              colors:[{text:'111',id:1,color:'#00af66'},...]
           }
         },
         mounted(){
           this.$dragging.$on('dragged',({value})=>{
              console.log(value.item,value.list,value.otherData)
              //value.item  => {color:'#4EFEB3',id:5,text:'555'}
              //value.list  => 打印出 colors 数组
              //value.otherData => undefined
           })
           this.$dragging.$on('dragend',(res)=>{
              console.log(res);// {group:'color'}
           })
         }
      }
   </script>
   <style lang="scss">
      .app-container{
         width:400px;
         .color-detail{
            width:400px;
            height:50px;
            line-height:50px;
            color:#fff;
            margin-bottom:20px;
         }
      }
   </style>
效果展示图：

官网地址：https://david-desmaisons.github.io/draggable-example/

参考链接：http://www.ptbird.cn/vue-draggable-dragging.html

标签：vue,color,list,value,顺序,vuedraggable,dragging,拖拽
来源： https://www.cnblogs.com/sunnyeve/p/14361359.html