vue列表拖拽排序

本文介绍了如何在Vue项目中利用vuedraggable插件进行列表的拖拽排序。首先,通过yarn或npm安装vuedraggable依赖。接着,在Vue2的页面中引入该插件,实现列表元素的动态排序功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

描述:通过vue的插件 draggable完成列表拖拽排序功能

1、安装依赖

yarn add vuedraggable

npm i -S vuedraggable

2、vue2 页面中引入

<template>
	<div>
    <div @click="commitSort">确定排序</div>
    <draggable v-model="dragList" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @update="onUpdate" @end="onEnd">
            <transition-group>
                <div class="item" v-for="element in myArray" :key="element.id">{
  
  {element.name}}</div>
            </transition-group>
        </draggable>
  </div>
</template>

<script>
  import vuedraggable from 'vuedraggable'
  export default{
    data(){
      return {
        dragList:[
          { people: 'cn', id: 1, sort:0, name: 'www.itxst.com' },
          { people: 'cn', id: 2, sort:1, name: 'www.baidu.com' },
          { people: 'cn', id: 3, sort:2,name: 'w
### Vue3 拖拽排序实现方法与推荐插件 Vue3 中实现拖拽排序功能可以通过多种方式完成,包括使用第三方插件或手动实现。以下是几种常见的解决方案: #### 1. 使用 SortableJS 和 sortablejs-vue3 SortableJS 是一个非常流行的 JavaScript 库,用于实现拖拽排序功能。`sortablejs-vue3` 是 SortableJSVue 3 封装版本,提供了简单易用的 API[^1]。通过安装 `sortablejs-vue3`,可以快速实现列表拖拽排序功能。 ```bash npm install sortablejs-vue3 ``` 在项目中使用时,可以按照以下代码示例进行配置: ```vue <template> <div> <ul v-sortable:options="sortableOptions"> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> </div> </template> <script> import { defineComponent } from "vue"; import Sortable from "sortablejs"; export default defineComponent({ data() { return { items: ["Item 1", "Item 2", "Item 3", "Item 4"], sortableOptions: { onEnd: (evt) => { const oldIndex = evt.oldIndex; const newIndex = evt.newIndex; this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]); }, }, }; }, }); </script> ``` #### 2. 使用 Vue.Draggable.next `Vue.Draggable.next` 是基于 `vuedraggable` 的 Vue 3 版本,支持拖拽排序功能,并且兼容 PC 和移动端[^2]。它允许用户通过拖拽改变列表项的顺序,并且支持动画效果。 安装命令如下: ```bash npm install vuedraggable@next ``` 使用示例: ```vue <template> <draggable v-model="items" @end="onDragEnd"> <transition-group> <div v-for="(item, index) in items" :key="index">{{ item }}</div> </transition-group> </draggable> </template> <script> import draggable from "vuedraggable"; export default { components: { draggable }, data() { return { items: ["Item 1", "Item 2", "Item 3", "Item 4"], }; }, methods: { onDragEnd(evt) { console.log("拖拽结束", evt); }, }, }; </script> ``` #### 3. 使用 VueSlicksort `VueSlicksort` 是另一个轻量级的拖拽排序组件,支持 Vue 3,并且提供了流畅的用户体验[^3]。它可以轻松地与 Vue 的响应式系统集成。 安装命令: ```bash npm install vue-slicksort ``` 使用示例: ```vue <template> <div class="slicksort-wrap"> <SlickList lockAxis="y" v-model="items" @input="getChangeLists"> <SlickItem v-for="(item, index) in items" :index="index" :key="index"> {{ item }} </SlickItem> </SlickList> </div> </template> <script> import { SlickList, SlickItem } from "vue-slicksort"; export default { components: { SlickList, SlickItem }, data() { return { items: ["Item 1", "Item 2", "Item 3", "Item 4"], }; }, methods: { getChangeLists(vals) { console.log("新的顺序", vals); }, }, }; </script> ``` #### 手动实现拖拽排序 如果不想依赖第三方库,也可以手动实现拖拽排序功能。这需要监听鼠标事件(如 `mousedown`、`mousemove` 和 `mouseup`),并动态调整 DOM 元素的位置。虽然这种方法灵活性更高,但开发成本较大,且需要处理跨浏览器兼容性问题。 --- ### 总结 对于 Vue3 项目中的拖拽排序功能,推荐优先使用成熟的第三方插件,如 `sortablejs-vue3` 或 `vuedraggable@next`,它们提供了完善的 API 和良好的用户体验。如果需要更轻量化的解决方案,可以考虑 `VueSlicksort`。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值