1分钟实现拖拽，让你划水更自由

vue.draggable 一个神奇的组件，快速实现列表拖拽，让你有更多的时候去划水。vue.draggable 是一款基于sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、兼容vue2过渡动画、支持撤销操作，总之vue.draggable是一款非常优秀的拖拽组件。以下是基础用法：

安装方式

yarn add vuedraggable
npm i -S vuedraggable

单列拖动

<template>
  <div>
    <draggable :list="list">
      <div 
        style="cursor: pointer" 
        v-for="item in list" 
        :key="item.id" :
        title="item.title" 
        :name="item.id"
      >
          {{item.title}}
      </div>
  </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: { draggable },
  data() {
      return {
         list: [
          {
           title: "aaa",
           id: 1,
          },
         {
           title: "bbb",
           id: 2,
        }
     ],
    };
  },
};
</script>

多列拖动

<template>
  <div>
    <!--使用draggable组件-->
    <div class="itxst">
      <div class="col">
        <div class="title">国内网站</div>
        <draggable
          v-model="arr1"
          group="site"
          animation="300"
          dragClass="dragClass"
          ghostClass="ghostClass"
          chosenClass="chosenClass"
          @start="onStart"
          @end="onEnd"
        >
          <transition-group>
            <div class="item" v-for="item in arr1" :key="item.id">
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
        <div class="title">国外网站</div>
        <draggable
          v-model="arr2"
          group="site"
          animation="300"
          dragClass="dragClass"
          ghostClass="ghostClass"
          chosenClass="chosenClass"
          @start="onStart"
          @end="onEnd"
        >
          <transition-group>
            <div class="item" v-for="item in arr2" :key="item.id">
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      arr1: [
        { id: 1, name: "www.itxst.com" },
        { id: 2, name: "www.jd.com" },
        { id: 3, name: "www.baidu.com" },
        { id: 4, name: "www.taobao.com" },
      ],
      arr2: [
        { id: 5, name: "www.google.com" },
        { id: 6, name: "www.msn.com" },
        { id: 7, name: "www.ebay.com" },
        { id: 8, name: "www.yahoo.com" },
      ],
    };
  },
  methods: {
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
  },
};
</script>

<style scoped>
/*定义要拖拽元素的样式*/
.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>

与组件混合使用 tag 和 componentData

<template>
  <div style="margin: 20px">
    <draggable
      tag="el-collapse"
      :list="list"
      :component-data="{
        on: {
          change: this.inputChanged,
        },
        props: {
          value: this.activeNames,
        },
      }"
    >
      <el-collapse-item
        v-for="item in list"
        :key="item.id"
        :title="item.title"
        :name="item.id"
      >
        <draggable :list="item.text">
          <div
            style="cursor: pointer"
            v-for="(lign, idx) in item.text"
            :key="idx"
          >
            {{ lign }}
          </div>
        </draggable>
      </el-collapse-item>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: { draggable },
  data() {
    return {
      list: [
        {
          title: "一级",
          id: 1,
          text: ["测试001", "测试002"],
        },
        {
          title: "二级",
          id: 2,
          text: ["测试003", "测试004"],
        },
      ],
      activeNames: [1, 2]
    };
  },
  methods: {
    inputChanged(val) {
      this.activeNames = val;
    },
  },
};
</script>

以上就是vue.draggable 的基础用法，此外 vue.draggable 还支持表格拖动，样式修改，事件监听等功能，更多用法请参考 vue.draggable中文文档
听说点赞的小伙伴今年都能走大运哟（‐＾▽＾‐）