vue拖拽排序库(SortableJS与vuedraggable)关系介绍对比, 用法, 及使用场景

废话

最终实现效果

关系对比介绍

vuedeaggable
官方地址
VueDraggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作

sortable
官网地址
官方地址2

从此可以看出 vuedeaggable是基于sortable.js二次封封装的一个js库, 二者本质上没啥区别, 一个针对于vue去使用的, 一个可以在其他地方更广泛的去使用,两个都是非常优秀的

用法

vuedraggable
1、安装

npm i -S vuedraggable

2、.vue 文件引入

import draggable from "vuedraggable";
components: { draggable },

3、简单的使用

template

   <draggable
       v-model="draggableList"
       animation="300"
       :options="{
         sort: true
       }"
       dragClass="pointer"
     >
       <div v-for="(item, index) in draggableList" :key="index">
         <div class="item">
           <i
             v-if="draggableTitle === '保存排序'"
             class="el-icon-rank mr15 pointer"
           ></i>
           {{ item.name }}
         </div>
       </div>
     </draggable>

data

 draggableTitle: "修改排序",
     draggableList: [
       { id: 1, name: "11" },
       { id: 2, name: "22" },
       { id: 3, name: "33" },
       { id: 4, name: "44" },
       { id: 5, name: "55" }
     ],

methods

 draggableClick() {
     if (this.draggableTitle === "修改排序") {
       this.draggableTitle = "保存排序";
     } else {
       this.$message.success("保存成功");
       this.draggableTitle = "修改排序";
     }
   },

sortable
1、安装

npm install sortablejs --save

2、.vue文件引用

import Sortable from "sortablejs";

3、elementui tabel 使用

template

    <div class="_table">
      sortable使用
      <el-button @click="sortableClick" size="small" class="ml50">{{
        sortableTitle
      }}</el-button>
    </div>
    <el-table
      :data="tableData"
      class="_table"
      width="700"
      stripe
      border
      :header-cell-style="{ backgroundColor: 'rgb(244, 244, 245)' }"
      style="width: 100%"
    >
      <el-table-column width="50" v-if="sortableTitle === '保存排序'">
        <template>
          <i class="el-icon-rank pointer"></i>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>

data

   sortableTitle: "修改排序",
     tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]

methods

 sortableClick() {
      if (this.sortableTitle === "修改排序") {
        this.setSort();
        this.sortableTitle = "保存排序";
      } else {
        this.$message.success("保存成功");
        this.sortableTitle = "修改排序";
      }
    },
    // 拖拽操作
    setSort() {
      const el = document.querySelectorAll("._table tbody")[0];
      if (el == undefined) {
        return false;
      }
      console.log(el);
      Sortable.create(el, {
        sort: true, //是否可进行拖拽排序
        animation: 150,
        // Class name for the drop placeholder,
        handle: ".pointer",
        //拖拽结束执行,evt执向拖拽的参数
        onEnd: ({ newIndex, oldIndex }) => {
          console.log(newIndex, oldIndex);
        }
      });
    }

至此结束,完整demo如下

<template>
  <div class="second_page3">
    <div class="vuedraggable">
      <div class="_table">
        vuedraggable使用
        <el-button @click="draggableClick" size="small" class="ml50">{{
          draggableTitle
        }}</el-button>
      </div>
      <draggable
        v-model="draggableList"
        animation="300"
        :options="{
          sort: true
        }"
        dragClass="pointer"
      >
        <div v-for="(item, index) in draggableList" :key="index">
          <div class="item">
            <i
              v-if="draggableTitle === '保存排序'"
              class="el-icon-rank mr15 pointer"
            ></i>
            {{ item.name }}
          </div>
        </div>
      </draggable>
    </div>
    <div class="_table">
      sortable使用
      <el-button @click="sortableClick" size="small" class="ml50">{{
        sortableTitle
      }}</el-button>
    </div>
    <el-table
      :data="tableData"
      class="_table"
      width="700"
      stripe
      border
      :header-cell-style="{ backgroundColor: 'rgb(244, 244, 245)' }"
      style="width: 100%"
    >
      <el-table-column width="50" v-if="sortableTitle === '保存排序'">
        <template>
          <i class="el-icon-rank pointer"></i>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import Sortable from "sortablejs";
export default {
  components: { draggable },
  data() {
    return {
      draggableTitle: "修改排序",
      draggableList: [
        { id: 1, name: "11" },
        { id: 2, name: "22" },
        { id: 3, name: "33" },
        { id: 4, name: "44" },
        { id: 5, name: "55" }
      ],
      sortableTitle: "修改排序",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  methods: {
    draggableClick() {
      if (this.draggableTitle === "修改排序") {
        this.draggableTitle = "保存排序";
      } else {
        this.$message.success("保存成功");
        this.draggableTitle = "修改排序";
      }
    },
    sortableClick() {
      if (this.sortableTitle === "修改排序") {
        this.setSort();
        this.sortableTitle = "保存排序";
      } else {
        this.$message.success("保存成功");
        this.sortableTitle = "修改排序";
      }
    },
    // 拖拽操作
    setSort() {
      const el = document.querySelectorAll("._table tbody")[0];
      if (el == undefined) {
        return false;
      }
      console.log(el);
      Sortable.create(el, {
        sort: true, //是否可进行拖拽排序
        animation: 150,
        // Class name for the drop placeholder,
        handle: ".pointer",
        //拖拽结束执行,evt执向拖拽的参数
        onEnd: ({ newIndex, oldIndex }) => {
          console.log(newIndex, oldIndex);
        }
      });
    }
  },
  created() {}
};
</script>
<style lang="less" scoped>
.second_page3 {
  .vuedraggable {
    .item {
      border-top: 5px solid #f6f8fc;
      padding: 10px 20px;
    }
  }
  .pointer {
    cursor: pointer;
    font-size: 18px;
    padding: 0 5px;
  }
}
</style>

使用场景

如果是 element ant 组件里的表格 拖拽排序 建议用Sortable, 其他简单的列表排序用vuedraggable
原因:
vuedraggable 使用是一个标签 包含你所要拖拽的内容list, 而element ant 这种ui框架,对 表格进行了封装,
draggable 无法准确的去包含到表格行(及tbody里的tr td)数据, 而Sortable是直接绑定一个dom,可以根据dom去绑定

笔记

具体更多使用方法请前往官方文档