npm install sortablejs --save

bower install --save sortablejs

<script src="../../js/Sortable.min.js"></script>

const sortable = new Sortable(el, {
     // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
    group: "name", 
    // boolean 定義是否列表單元是否可以在列表容器內進行拖拽排序
    sort: true,  
     // number 定義鼠標選中列表單元可以開始拖動的延遲時間；
    delay: 0,
    // px，在取消延遲拖動事件之前，點應該移動多少像素
    touchStartThreshold: 0, 
    // boolean 定義是否此sortable對象是否可用，為true時sortable對象不能拖放排序等功能，為false時為可以進行排序，相當于一個開關；
    disabled: false, 
    // @see Store
    store: null, 
     // ms, number 單位：ms，定義排序動畫的時間
    animation: 150, 
    // 制作動畫。默認為null，https://easings.net/。
    easing: "cubic-bezier(1, 0, 0, 1)",
     // 格式為簡單css選擇器的字符串，使列表單元中符合選擇器的元素成為拖動的手柄，只有按住拖動手柄才能使列表單元進行拖動
    handle: ".my-handle", 
    // 過濾器，不需要進行拖動的元素
    filter: ".ignore-elements", 
    //  在觸發(fā)過濾器`filter`的時候調用`event.preventDefault()`
    preventOnFilter: true, 
     // 允許拖拽的項目類名
    draggable: ".item", 
     // drop placeholder的css類名
    ghostClass: "sortable-ghost", 
     // 被選中項的css 類名
    chosenClass: "sortable-chosen", 
     // 正在被拖拽中的css類名
    dragClass: "sortable-drag", 
    dataIdAttr: 'data-id',
    // 交換區(qū)的閾值
    swapThreshold: 1,
    // 如果設置為 true，將始終使用反向交換區(qū)
    invertSwap: false, 
    // 反向交換閾值，默認情況下將設置為swapThreshold 值
    invertedSwapThreshold: 1, 
    // 拖拽方向 (默認情況下會自動判斷方向)
    direction: 'horizontal', 
    // 忽略 HTML5拖拽行為，強制回調進行
    forceFallback: false,  
    // 當使用forceFallback的時候，被復制的dom的css類名
    fallbackClass: "sortable-fallback",  
    // 將cloned DOM 元素掛到body元素上。
    fallbackOnBody: false,  
     // 以像素為單位指定鼠標在被視為拖動之前應移動的距離。
    fallbackTolerance: 0,
    // 是否啟用滾動，值為true或者HTMLElement
    scroll: true,
    // 自定義滾動
    scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, 
    // 鼠標必須離邊緣多近才能開始滾動，單位 px
    scrollSensitivity: 30, 
     // 滾動速度，px
    scrollSpeed: 10,
    // 將自動滾動應用于所有父元素，以便更輕松地移動
    bubbleScroll: true, 
    dragoverBubble: false,
    // 刪除不顯示的克隆元素，而不是僅僅隱藏它
    removeCloneOnHide: true, 
    // 拖動時鼠標必須與空可排序項的距離（以像素為單位）,以便將拖動元素插入到該可排序項中, 設置為0禁用此功能。
    emptyInsertThreshold: 5,
    setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
        dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
    },
    // 元素被選中
    onChoose: function (/**Event*/evt) {
        evt.oldIndex;  // element index within parent
    },
    // 元素未被選中的時候（從選中到未選中）
    onUnchoose: function(/**Event*/evt) {
        // same properties as onEnd
    },
    // 開始拖拽的時候
    onStart: function (/**Event*/evt) {
        evt.oldIndex;  // element index within parent
    },
    // 結束拖拽
    onEnd: function (/**Event*/evt) {
        var itemEl = evt.item;  // dragged HTMLElement
        evt.to;    // target list
        evt.from;  // previous list
        evt.oldIndex;  // element's old index within old parent
        evt.newIndex;  // element's new index within new parent
        evt.clone // the clone element
        evt.pullMode;  // when item is in another sortable: `"clone"` if cloning, `true` if moving
    },
    // 元素從一個列表拖拽到另一個列表
    onAdd: function (/**Event*/evt) {
        // same properties as onEnd
    },
    // 列表內元素順序更新的時候觸發(fā)
    onUpdate: function (/**Event*/evt) {
        // same properties as onEnd
    },
    // 列表的任何更改都會觸發(fā)
    onSort: function (/**Event*/evt) {
        // same properties as onEnd
    },
    // 元素從列表中移除進入另一個列表
    onRemove: function (/**Event*/evt) {
        // same properties as onEnd
    },
    // 試圖拖拽一個filtered的元素
    onFilter: function (/**Event*/evt) {
        var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
    },
    // 拖拽移動的時候
    onMove: function (/**Event*/evt, /**Event*/originalEvent) {
        // Example: https://jsbin.com/nawahef/edit?js,output
        evt.dragged; // dragged HTMLElement
        evt.draggedRect; // DOMRect {left, top, right, bottom}
        evt.related; // HTMLElement on which have guided
        evt.relatedRect; // DOMRect
        evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default
        originalEvent.clientY; // mouse position
        // return false; — for cancel
        // return -1; — insert before target
        // return 1; — insert after target
    },
    // clone一個元素的時候觸發(fā)
    onClone: function (/**Event*/evt) {
        var origEl = evt.item;
        var cloneEl = evt.clone;
    },
    // 拖拽元素改變位置的時候
    onChange: function(/**Event*/evt) {
        evt.newIndex // most likely why this event is used is to get the dragging element's current index
        // same properties as onEnd
    }
});                    

<script setup lang="ts">
import Sortable from 'sortablejs'
import { ref, onMounted, nextTick } from 'vue';
const sortableRef = ref(null)
const list = [
  {
    name: 'item1'
  },
  {
    name: 'item2'
  },
  {
    name: 'item3'
  },
  {
    name: 'item4'
  },
  {
    name: 'item5'
  },
  {
    name: 'item6'
  }
]
const initSortable = () => {
  new Sortable(sortableRef.value, {
      delay: 10,
      animation: 150,
      // 如果有不想排序的，在這里按照class匹配的方式寫出即可
      filter: '.demo-title',
      // 需要拖拽的標簽的class，強烈推薦寫
      draggable: '.demo-item',
      // drop placeholder的css類名
      ghostClass: 'blue-background-class'
  });
}
onMounted(() => {
  nextTick(() => {
    initSortable()
  })
})
</script>
<template>
  <ul ref="sortableRef" class="demo">
    <li class="demo-title">Demo</li>
    <li class="demo-item" v-for="item in list" :key="item.name">{{ item.name }}</li>
  </ul>
</template>
<style lang="scss" scoped>
.demo {
  list-style: none;
  width: 40%;
  margin: 200px auto 0;
  .demo-title {
    text-align: center;
    font-weight: 600;
    font-size: 16px;
  }
  .demo-item {
    border: 1px solid red;
    margin: 10px 0;
    padding: 10px 0;
    text-align: center;
  }
}
.blue-background-class {
  background-color: #1890ff;
}
</style>

<script setup lang="ts">
import Sortable from 'sortablejs'
import { ref, onMounted, nextTick } from 'vue';
const demo1Ref = ref(null)
const demo2Ref = ref(null)
const initSortable = () => {
  new Sortable(demo1Ref.value, {
    // 相互拖拽列表的組名必須一樣
    group: 'shared',
    delay: 10,
    animation: 150,
    // 需要拖拽的標簽的class，強烈推薦寫
    // 拖拽元素的類名一樣，否則其它列表拖過來的不能在當前列表拖動
    draggable: '.demo-item'
  });
  new Sortable(demo2Ref.value, {
    // 相互拖拽列表的組名必須一樣
    group: 'shared',
    delay: 10,
    animation: 150,
    // 需要拖拽的標簽的class，強烈推薦寫
    // 拖拽元素的類名一樣，否則其它列表拖過來的不能在當前列表拖動
    draggable: '.demo-item'
  });
}
onMounted(() => {
  nextTick(() => {
    initSortable()
  })
})
</script>
<template>
  <div class="demo-container">
    <ul ref="demo1Ref" class="demo">
      <li class="demo-item demo1-item" v-for="item in 6" :key="'demo1'+item">item{{ item }}</li>
    </ul>
    <ul ref="demo2Ref" class="demo">
      <li class="demo-item demo2-item" v-for="item in 6" :key="'demo2'+item">item{{ item }}</li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.demo-container {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  .demo {
    list-style: none;
    width: 48%;
    .demo-item {
      margin: 10px 0;
      padding: 10px 0;
      text-align: center;
    }
    .demo1-item {
      background-color: #5ac8fa;
    }
    .demo2-item {
      background-color: #c0ca33;
    }
  }
}
</style>        

new Sortable(demo1Ref.value, {
  group: {
    name: 'shared',
    pull: 'clone' // To clone: set pull to 'clone'
  },
  delay: 10,
  animation: 150,
  // 需要拖拽的標簽的class，強烈推薦寫
  // 拖拽元素的類名一樣，否則其它列表拖過來的不能在當前列表拖動
  draggable: '.demo-item'
});
new Sortable(demo2Ref.value, {
  group: {
    name: 'shared',
    pull: 'clone' // To clone: set pull to 'clone'
  },
  delay: 10,
  animation: 150,
  // 需要拖拽的標簽的class，強烈推薦寫
  // 拖拽元素的類名一樣，否則其它列表拖過來的不能在當前列表拖動
  draggable: '.demo-item'
});

new Sortable(demo1Ref.value, {
  group: {
    name: 'shared',
    pull: 'clone',
    put: false // 不允許拖拽進這個列表
  },
  sort: false, // 設為false，禁止sort
  delay: 10,
  animation: 150,
  // 需要拖拽的標簽的class，強烈推薦寫
  // 拖拽元素的類名一樣，否則其它列表拖過來的不能在當前列表拖動
  draggable: '.demo-item'
});
new Sortable(demo2Ref.value, {
  group: 'shared',
  delay: 10,
  animation: 150,
  // 需要拖拽的標簽的class，強烈推薦寫
  // 拖拽元素的類名一樣，否則其它列表拖過來的不能在當前列表拖動
  draggable: '.demo-item'
});

<script setup lang="ts">
import Sortable from 'sortablejs'
import { ref, onMounted, nextTick } from 'vue';
const sortableRef = ref(null)
const initSortable = () => {
  new Sortable(sortableRef.value, {
    handle: '.handle-draggabel',
    animation: 150,
  });
}
onMounted(() => {
  nextTick(() => {
    initSortable()
  })
})
</script>
<template>
  <ul ref="sortableRef" class="demo">
    <li class="demo-item" v-for="item in 6" :key="item">
      <span class="handle-draggabel"></span>
      <span>item{{ item }}</span>
    </li>
  </ul>
</template>
<style lang="scss" scoped>
.demo {
  list-style: none;
  width: 40%;
  .demo-item {
    background-color: #1890ff;
    margin: 10px 0;
    padding: 10px 0;
    color: #fff;
    text-align: center;
    .handle-draggabel {
      display: inline-block;
      width: 14px;
      height: 14px;
      background-color: #fff;
      margin-right: 10px;
      cursor: pointer;
    }
  }
}
</style>