vue列表拖拽

 //  模板部分
 
          
          
          
          
            
          
        
   // script 部分
    data() {
	    return {
	    	 cinemaLabels: [],
	    }
    }
  methods: {
	// 行拖拽
    rowDrop() {
      const tbody = document.querySelector('.tableList .el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        draggable: '.el-table__row',
        onEnd({ newIndex, oldIndex }) {
          const tab = JSON.parse(JSON.stringify(_this.cinemaLabels))
          const currRow = tab[oldIndex]
          tab.splice(oldIndex, 1)
          tab.splice(newIndex, 0, currRow)
          _this.cinemaLabels = tab
          setTimeout(() => {
            _this.$nextTick(() => {
              _this.showForm.storeTags = _this.cinemaLabels
            })
          }, 5)
        }
      })
    },
      columnDrop() {
      const wrapperTr = document.querySelector('tableList tr')
      const _this = this
      Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const dropCol = JSON.parse(JSON.stringify(_this.dropCol))
          const oldItem = dropCol[evt.oldIndex]
          dropCol.splice(evt.oldIndex, 1)
          dropCol.splice(evt.newIndex, 0, JSON.parse(JSON.stringify(oldItem)))
          setTimeout(() => {
            _this.dropCol = JSON.parse(JSON.stringify(dropCol))
          }, 5)
        }
      })
    },
    deleteCinemaTip(info) {
      this.cinemaLabels.map((item, index) => {
        if (item.name === info.name) {
          this.cinemaLabels.splice(index, 1)
        }
      })
      this.showForm.storeTags = this.cinemaLabels
    },
}