vue3 draggable 拖动插件使用（二维数组）

1. 安装引用

安装这里我也是各种难

vue版本：3.2.33

有各种报错：vuedraggable@4.1.0

如：TypeError：Cannot read properties of undefined (reading 'header') 等等各种错误

// 安装
npm install vuedraggable

// 引用
import draggable from 'vuedraggable'

正确：vue-draggable-next@2.2.1

注意：如果上面安装过vuedraggable的，要先卸掉！！！

npm uninstall vuedraggable

// 安装
npm install vue-draggable-next

// 引用
import {VueDraggableNext} from 'vue-draggable-next'

2. 使用

直接使用<VueDraggableNext>标签

<div class="flex-row peop-list justify-start items-center"
     v-for="(item, index) in dataList.value"
     :key="item.employeeId"
>
    <VueDraggableNext v-model="list"
                      v-for="(res, resIndex) in item.reservationList"
                      :key="resIndex"
                      group="test"
                      :id="index + '-' + resIndex"
                      @end="dragEnd($event, item, res)"
                      tag="div"
                      filter=".unmover"
    >
        <div :class="res.state != 1 ? 'unmover' : ''">
            <!-- 内容 -->
        </div>
    </VueDraggableNext>
</div>

里面的filter=".unmover"导致点击class为unmover的元素，不触发，可以改为draggable

<div class="flex-row peop-list justify-start items-center"
     v-for="(item, index) in dataList.value"
     :key="item.employeeId"
>
    <VueDraggableNext v-model="list"
                      v-for="(res, resIndex) in item.reservationList"
                      :key="resIndex"
                      group="test"
                      :id="index + '-' + resIndex"
                      @end="dragEnd($event, item, res)"
                      tag="div"
                      draggable=".mover"
    >
        <div :class="res.state == 1 ? 'mover' : ''">
            <!-- 内容 -->
        </div>
    </VueDraggableNext>
</div>

这里我自己设置了 id 属性，用于找到被放置的位置，拿到他的内容

// dataList 大致格式如下
dataList = [{reservationList:[{},{}]},{reservationList:[{},{}]}]

// 拖拽
const dragEnd = (e, row, detail) => {
  // 结果节点获取
  let indexArr = e.to.id.split('-')
  let endFatObj = dataList[Number(indexArr[0])]
  let endObj = endFatObj.reservationList[Number(indexArr[1])]
}

3. 其它

v-model： 写上v-model给个其它的值，拖拽元素会回到原位，是因为for循环中有key；如果不写v-model会有直接被拖拽到新位置（所以根据个人需求写或不写v-model），而我想要判断，满足某个条件才拖拽成功；所以v-model中的list我顺便写的

const list = reactive([1, 2, 3, 4, 5, 6])

group：直接写死一个固定的字符串，这样不分组，全部都能来回拖动；

id：对这里来说，单纯是作为找到放置后位置的一个属性；（有其它方式的，可以不加这个属性）

filter：指定条件下，不可拖动的元素，上面写了class用来标记不可拖动的div，但这个在平板设备上导致点击事件失效，所以可以使用 draggable 

draggable ：指定条件下，不可拖动的元素，上面写了class用来标记可拖动的div

vue-draggable-next文档：vue.draggable.next 中文文档 - itxst.com