Sortable 在onEnd方法里调用取消排序的方法

sortableSettings.onEnd = function (evt) {
    //undo the move in html
    var tagName = evt.item.tagName;
    var items = evt.from.getElementsByTagName(tagName);
    if (evt.oldIndex > evt.newIndex) {
        evt.from.insertBefore(evt.item, items[evt.oldIndex+1]);
    }
    else {
        evt.from.insertBefore(evt.item, items[evt.oldIndex]);
    }

    //redo the move in angular/vue/blazor/etc...
    //dotNetHelper.invokeMethodAsync('SwapList', evt.oldIndex, evt.newIndex);
};

      const el = document.querySelector('.my-table tbody')

      const that = this

      this.sortAble = Sortable.create(el, {

        handle: '.drag-btn',

        onEnd: function (event) {

          var newIndex = event.newIndex

          var oldIndex = event.oldIndex

          if (newIndex != oldIndex) {

            const dragItem = that.bizForm.meetingDetilList.splice(oldIndex, 1)[0] // 获取移动的 item

            console.log('dragItem', dragItem)

            let list = that.getIndex(dragItem.topicStatus)

            let minIndex = Math.min(...list)

            let maxIndex = Math.max(...list)

             // 只能在指定区域内移动排序

            if (newIndex >= minIndex && newIndex <= maxIndex) {

              that.bizForm.meetingDetilList.splice(newIndex, 0, dragItem) // 插入新位置

              that.bizForm.meetingDetilList.forEach((m, i) => {

                Object.assign(m, {

                  sort: i

                })

              })

              console.log('newMeetingDetilList', that.bizForm.meetingDetilList)

              updateMeetingDetailOrder(that.bizForm.meetingDetilList).then(res => {

                console.log('res', res)

              })

            } else {

              // 不满足条件时，取消拖动排序

              var tagName = event.item.tagName

              var items = event.from.getElementsByTagName(tagName)

              if (event.oldIndex > event.newIndex) {

                event.from.insertBefore(event.item, items[event.oldIndex + 1])

              } else {

                event.from.insertBefore(event.item, items[event.oldIndex])

              }

              that.$message.error(`状态为${dragItem.topicStatusValue}的议题只能在${dragItem.topicStatusValue}区域内进行拖动排序！`)

              that.bizForm.meetingDetilList.splice(oldIndex, 0, dragItem) // 插入旧位置

              console.log('oldMeetingDetilList', that.bizForm.meetingDetilList)

            }

          }

        }

      })

原文地址：https://blog.csdn.net/weixin_46041137/article/details/143016705

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！