表格、列表的拖動、拖拽效果

在開發使用vue.js、elementUI開發專案時，客戶提出將表格中的內容可隨意拖動實現排序功能。
於是專案中採用sortablejs來實現該功能。

1.引入sortablejs

 $ npm install sortablejs --save

2.元件中引入sortablejs

 <script>
	import Sortable from "sortablejs"

3.實現方法

  methods: {
    init() {
     // 一定要等頁面先載入完後才呼叫，否則會報錯
      this.
 
$nextTick(() => {
        this.initSort()
      })
    },
    initSort() {
      const el = document.querySelectorAll(
        ".table-list .el-table__body-wrapper > table > tbody"
      )[0] // 獲取拖拽的容器 .table-list 一定是table上的class 如果是其他上的class名稱，可能會無法拖拽
      this.sortable = Sortable.create(el,
 
 {
        ghostClass: "sortable-ghost",
        // handle: ".drag-item", // 指定推拽列
        setData: function (dataTransfer) {
          dataTransfer.setData("Text", "")
        },
        onEnd: evt => {
          this.$nextTick(() => {
          	// 實現推拽的程式碼，先在原陣列中刪除當前推拽的物件，然後在將它新增到對應的位置
          	// targetObj當前推拽的物件，evt.oldIndex推拽物件原來的下標，evt.newIndex推拽物件要推拽到的下標
 

            let targetObj = this.tables.splice(evt.oldIndex, 1)[0]
            this.tables.splice(evt.newIndex, 0, targetObj)
          })
        }
      })
    }

4.注意、注意、注意：如果你推拽不成功，或者順序不正確，請檢視<el-table>標籤上是否指定了row-key屬性。

<el-table :data=tables  class="table-list" row-key="id" ref="table" size='small' border>

5.如果你要使用handle: ".drag-item",屬性的話，需要再表格中新增如下程式碼，指定其 className="drag-item"

<el-table :data=tables  class="table-list" row-key="id" ref="table" size='small' border>
 <el-table-column className="drag-item" width="50" align="center" label="拖拽">
   <template slot-scope="scope">
     <i class="icon icon-drag"></i>
   </template>
 </el-table-column>

最後附上 sortablejs 文件地址

如果本文對你有幫助，請大佬打賞，謝謝