vue3 的拖拽排序博主用的是 vuedraggable

安装

安装
npm i vuedraggable@4.1.0 --save
引用
import Draggable from 'vuedraggable';

代码

html

 <van-checkbox-group v-model="dataMap.newsActionChecked">
      <van-cell-group inset>
        <Draggable
          v-model="tags"
          :list="dataMap.newsActionList"
          :animation="100"
          item-key="id"
          class="list-group"
          :forceFallback="true"
          ghost-class="ghost"
          @change="onMoveCallback"
        >
  
          <template #item="{ element }">
            <van-cell
              :title="element.title"
              :label="element.label"
              clickable
              center
              :key="element"
              :draggable="true"
            >
              <template #icon>
                <van-checkbox
                  :name="element.title"
                  :ref="(el) => (checkboxRefs[index] = el)"
                  @click.stop
                  v-if="element.showChecked"
                />
                <div v-else style="width: 20px"></div>
              </template>
              <template #right-icon>
                <img src="../../assets/img/u1347.png" alt="" class="dragImg" />
              </template>
            </van-cell>
          </template>
        </Draggable>
      </van-cell-group>
    </van-checkbox-group>

js

<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import Draggable from "vuedraggable";

const onMoveCallback = (val) => {
  console.log("拖动前的索引 :" + val.moved.newIndex);
  console.log("拖动后的索引 :" + val.moved.oldIndex);
};
const getdata = (val) => {
  console.log(val.draggedContext.element.id);
};
const dragItem = ref(null);
const dataMap = reactive({
  newsActionChecked: [],
  newsActionList: []
});

  const toggle=(index) => {
    checkboxRefs.value[index].toggle();
  };

onMounted(async () => {
  //   methodMap.getList();
  await nextTick();
  for (let i = 0; i < 10; i++) {
    dataMap.newsActionList.push({
      title: "title" + i,
      label: "label" + i,
      showChecked: true,
    });
  }
});
</script>

效果

拖拽前

拖拽时

拖拽后