Sortablejs 首行不能移动并且其他行不能覆盖

<template>
  <div class="item-container" ref="sortableList">
    <div
      :class="['item', 'item-' + index]"
      v-for="(item, index) in formData.tarbarList"
      :key="index"
      :data-index="index"
    ></div>
  </div>
</template>

<script setup lang="ts" name="bottomNavigator">
import Sortable from 'sortablejs'
import { nextTick, onMounted, ref } from 'vue'

const formData = ref({
  tarbarList: [
    {
      pagePath: undefined,
      iconPath: '',
      selectedIconPath: '',
      text: '首页'
    }
  ]
})

const sortableList = ref<any>(null)
function sortHandle() {
  Sortable.create(sortableList.value, {
    animation: 150,
    ghostClass: 'sortable-ghost', // 设置虚影类名
    filter: '.item-0',
    onMove: function (evt) {
      // evt.related 即将移动到的位置
      console.log('evt.related', evt.related)
      const canSort = evt.related.getAttribute('data-index') // 获取 data-id 属性
      // 如果是，阻止这次移动
      return Number(canSort) !== 0
    },
    onUpdate: function (evt: { oldIndex: number; newIndex: number }) {
      const newIndex = evt.newIndex
      const oldIndex = evt.oldIndex
      const movedItem = formData.value.tarbarList.splice(oldIndex, 1)[0] // 从旧位置移除元素
      formData.value.tarbarList.splice(newIndex, 0, movedItem) // 在新位置插入元素
      const list = formData.value.tarbarList.map((item) => {
        return {
          ...item
        }
      })
      // 必须清除先
      formData.value.tarbarList = []
      nextTick(() => {
        formData.value.tarbarList = list
      })
    }
  })
}

onMounted(() => {
  // 排序
  sortHandle()
})
</script>

<style lang="scss" scoped></style>