vuedraggable卡片拖拽排序和infinite-scroll无线滚动

本文链接：https://blog.csdn.net/weixin_46277258/article/details/125556156

vuedraggable要注意的是，拖拽的时候会自动排序数组，如果需要调用排序后端接口的话，建议先保存拖拽前数据

        <div v-infinite-scroll="loadMore" :infinite-scroll-disabled="busy" infinite-scroll-distance="10" :style="{width: '100%', height: '93.5%' }">
          <draggable element="ul" v-model="CardProjectList" class="all-card" delay="200"
            item-key="index" :scroll="true" @start="start" @end="end" forceFallback="true"
            touchStartThreshold="5px" animation="200ms" drag-class="drag">   
            <template #item="{ element }">
              <a-card hoverable :style="{ width: '350px', height: '350px', padding: '0' }" class="monitor-card" @click.stop.prevent="toBrowse(element)">
                <div class="card-img-all">
                  <img :class="element.thumbnailImg ==='' ? 'card-img-noImg' : 'card-img'" alt=""
                    :src="element.thumbnailImg ==='' ? require('@/assets/images/common/noImg.png') : element.imageUrl + element.thumbnailImg.image_path" />
                </div>
                <div class="card-body">
                  <a-tooltip placement="topLeft" :color="'#0C9898'" :getPopupContainer="trigger => trigger.parentNode">
                    <template #title>
                      <div>{{element.devName}}</div>
                      <div>分辨率：{{element.projectInfoBase.resolution}}</div>
                    </template>
                    <span class="card-title">{{ element.projectName }}</span>
                  </a-tooltip>
                  <div class="card-tab">
                    <div class="card-line">
                      <span :class="element.operaRole ===1 ? 'card-span-item' : 'card-span-item-off'" @click.stop.prevent="toEditor(element)">{{ $t('routes.monitor.card.edit')
                      }}</span>
                      <span class="card-span-item" @click.stop.prevent="toBrowse(element)">{{ $t('routes.monitor.card.browse') }}</span>
                      <span :class="element.operaRole ===1 ? 'card-span-item-off' : 'card-span-item-off'" @click.stop.prevent="share">{{ $t('routes.monitor.card.share')
                      }}</span>
                      <span :class="element.operaRole ===1 ? 'card-span-item card-span-item-spec' : 'card-span-item-off card-span-item-spec'" @click.stop.prevent="showCopyProjectModal(element)">{{ $t('routes.monitor.card.copy') }}</span>
                    </div>
                    <div class="card-line">
                      <span :class="element.operaRole ===1 ? 'card-span-item' : 'card-span-item-off'"  @click.stop.prevent="showExportProjectModal(element.ztProjectId, element.projectName, element.operaRole)">{{ $t('routes.monitor.card.export') }}</span>
                      <span :class="element.operaRole ===1 ? 'card-span-item' : 'card-span-item-off'"
                        @click.stop.prevent="showProjectModal(ModalEnum.EDIT, element.ztProjectId, element.operaRole)">{{
                            $t('routes.monitor.card.setUp')
                        }}</span>
                      <span :class="element.operaRole ===1 ? 'card-span-item' : 'card-span-item-off'"
                        @click.stop.prevent="showDelModal(ModalEnum.PROJECT, element.ztProjectId, element.projectName, element.operaRole)">{{
                            $t('common.delText')
                        }}</span>
                      <span class="card-span-item card-span-item-spec" 
                        @click.stop.prevent="selectedGroupKeys[0] == 0 ? showBindGroupModal(element.ztProjectId, element.projectName) : showNoBindGroupModal(element.ztProjectId)">{{
                            selectedGroupKeys[0] == 0 ? $t('routes.monitor.card.assignment') : $t('解绑')
                        }}</span>
                    </div>
                  </div>
                </div>
              </a-card>
            </template>
          </draggable>
        </div>
         <div class="noMore" v-if="busy && count !== 2">{{ $t('routes.monitor.noMore') }}</div>
         </div>

// 卡片拖动开始
const start = async () => {
  copyProject = CardProjectList.value
}

// 卡片拖动结束
const end = async (e: any) => {
  if (e.oldIndex === e.newIndex) {
    return
  }
  const newIndex = ref<number>()
  const oldIndex = ref<number>()
  copyProject?.forEach((item, index) => {
    if (index === e.oldIndex) {
      oldIndex.value = item.ztProjectId
    }
    if (index === e.newIndex) {
      newIndex.value = item.ztProjectId
    }
  })

// 无线滚动加载更多
const loadMore = async () => {
  if (!busy.value && count.value > 1) {
    if (selectedTypeKeys.value[0] === '1') {
      message.loading(i18n.t('common.loadingText') + '...', 0)
      if (selectedGroupKeys.value[0] === 0) {
        requestProjectList()
        message.destroy()
      }
      else {
        requestProjectListById()
        message.destroy()
      }
    }
  }
  else {
    if (ifLast.value === 1 && count.value !== 2) {
      message.warning(i18n.t('routes.monitor.noDataload') + '!')
      ifLast.value = 2
    }
  }
}