表格拖動插件(Sortable || vuedraggable)

表格拖動插件

封裝的表格table，想要拖動每一行，用Sortable

import Sortable from 'sortablejs';
// 下方此處得放在挂載後
 Sortable.create(ele, {
          disabled: false,
          ghostClass: 'sortable-ghost', // 樣式
          animation: 450,   // 動畫時間
          handle: '.mover', // 綁定可拖動的元素 拖動那表格哪一個元素才可進行拖動表格
          onEnd: (e) => {  // 拖動完成會觸發這個鈎子，這裡做邏輯處理資料
            let oldItem = { ...this.subSystem.data[e.oldIndex] };
            let sort = oldItem.sort;
            let tarItem = { ...this.subSystem.data[e.newIndex] };
            oldItem.sort = tarItem.sort;
            this.subSystem.data[e.newIndex].sort = sort;
            if (e.oldIndex > e.newIndex) {
              this.subSystem.data.splice(e.newIndex, 0, oldItem);
              this.subSystem.data.splice(e.oldIndex + 1, 1);
            }
            else {
              this.subSystem.data.splice(e.newIndex + 1, 0, oldItem);
              this.subSystem.data.splice(e.oldIndex, 1);
            }
            this.timer = new Date().getTime();
            const { page, size } = this.pageOption;
            let no = size * (page + 1) + 1 - size;
            this.sortSubSystem(no);
          },
          onMove: () => {
          },
        });
           

不是封裝的表格，可以使用 vuedraggable 插件

<template>
  <draggable
    tag="ul"
    :value="list"
    v-bind="{
      group: { name: 'form-draggable', pull: 'clone', put: false },
      sort: false,
      animation: 180,
      ghostClass: 'moving'
    }"
    @start="handleStart($event, list)"
  >
    <li
      v-for="(val, index) in list"
      :key="index"
      @dragstart="$emit('generateKey', list, index)"
      @click="$emit('handleListPush', val)"
    >
      <svg v-if="val.icon" class="icon" aria-hidden="true">
        <use :xlink:href="`#${val.icon}`"></use>
      </svg>
      {{ val.label }}
    </li>
  </draggable>
</template>
<script>
  import draggable from 'vuedraggable';
  export default {
    name: 'collapseItem',
    components: {
      draggable,
    },
    props: ['list'],
    methods: {
      handleStart (e, list) {
        this.$emit('start', list[e.oldIndex].type);
      },
    },
  };
</script>