vue3拖拽排序——vuedraggable

拖拽排序——vuedraggable"/>

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><Draggablev-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"clickablecenter:key="element":draggable="true"><template #icon><van-checkbox:name="element.title":ref="(el) => (checkboxRefs[index] = el)"@click.stopv-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>

效果

拖拽前

拖拽时

拖拽后