在vue中实现拖拽功能

需求很简单，拖动框框或者数字来调整顺序。如下图

一、找轮子

在网上搜了一会发现一个好用的插件——vue-draggable

二、使用方法

1. 安装
npm i -S vuedraggable
2. 引用
import draggable from 'vuedraggable'
3. 实现需求

<template>
  <div class="dragbox">
    <div class="note"> 拖动题型或题号调整顺序 </div>
    <draggable v-model="list" v-bind="firstDragOptions" @change="changeTitle">
      <transition-group>
        <div class="titleBox" v-for="(item,index) in list" :key="index">
          <div class="firstTitle">{{item.firstTitle}}</div>
          <draggable v-model="item.secondTitle" @change="changeNum" v-bind="secondDragOptions" :group="'changeNum'+index">
            <transition-group>
              <div class="secondTitle" v-for="(title,key) in item.secondTitle" :key="key">
                <span class="num">{{title}}</span>
              </div>
            </transition-group>
          </draggable>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>
 
<script>
import draggable from "vuedraggable";
import cloneDeep from "lodash/cloneDeep";
 
export default {
  name: "DragComponent",
  components: {draggable},
  props: ["dragTitles"],
  data() {
    return {list: []
    };
  },
  computed: {firstDragOptions() {
      return {
        group: "changeTitle",
        animation: 200,
        disabled: false,
        ghostClass: "ghost"
      };
    },
     secondDragOptions() {
      return {
        animation: 200,
        disabled: false,
        ghostClass: "ghost2"
      };
     }
  },
  created() {this.list = cloneDeep(this.dragTitles);
  },
  methods: {changeTitle(evt) {console.log("this.list:", this.list);
    },
    changeNum(evt) {console.log("this.list:", this.list);
    }
  }
};
</script>
 
<style lang="scss" scoped>
.dragbox {padding: 0 10px;}
.note {
  color: #999999;
  font-size: 14px;
}
.titleBox {
  height: 116px;
  padding: 10px 20px;
  border: 1px dashed #999;
  margin-top: 20px;
}
.firstTitle {
  font-size: 16px;
  color: #000;
}
.secondTitle {
  width: 40px;
  height: 40px;
  border: 1px solid rgb(0, 153, 255);
  border-radius: 6px;
  line-height: 40px;
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  display: inline-block;
  margin-right: 10px;
}
</style>

4. 注意事项

• group 属性相同的话可以互相拖拽，故不想互相拖拽的话，要分开设置。比如我用 :group="'changeNum'+index" 使每个框的数字互不干扰。
• 父组件传过来的数据不能直接双向绑定，可以克隆一下数据再绑定。