vue实现元素自由拖拽完成排序

如果想要实现元素可以自由拖动排序,可用插件:vuedraggable

下载:yarn add vuedraggable

使用:在要拖动的元素外添加一下标签:

 需要注意的是:transition-group标签的第一个子元素必须是div

  <draggable
          v-if="isShowBtn"
          class="channel-content"
          animation="1000"
          @end="handleDragEnd"
          v-model="textData"
        >
          <transition-group>
            <div class="channelList" v-for="(v, i) in textData" :key="v">
              {{ v }}
              <van-image
                v-if="isShowBtn"
                @click="deleteChannel(v, i)"
                :src="require('@/assets/img/icon-cross-simple.png')"
              />
            </div>
          </transition-group>
        </draggable>

textData 是一个数组,表示需要拖动和排序的元素列表。通过 v-modeltextDatadraggable 组件绑定,以便在拖拽和排序时自动更新列表
handleDragEnd是拖动后的api,可做拖动后的处理
animation 属性用于设置拖动元素时的动画过渡效果的持续时间。它指定了从一个位置到另一个位置的过渡所需的时间(以毫秒为单位)

### 实现 Vue 列表项跨两个容器的拖拽排序 为了实现Vue 中列表项能够跨越两个不同容器进行拖拽并保持有序排列,通常采用第三方库 `Sortable.js` 或其封装版本 `vuedraggable` 来简化操作。这种方式不仅支持基本的内部排序,还允许元素在多个列表间自由移动。 #### 安装依赖包 首先需要引入必要的 JavaScript 库: ```bash npm install vuedraggable --save ``` #### HTML 结构定义 创建两个用于展示待办事项的任务板,每个任务板都由一组可交互的任务卡片组成[^1]。 ```html <div id="app"> <draggable class="list-group" :list="listA" group="people" @change="log"> <div class="list-group-item" v-for="(element, index) in listA" :key="index">{{ element.name }}</div> </draggable> <draggable class="list-group" :list="listB" group="people" @change="log"> <div class="list-group-item" v-for="(element, index) in listB" :key="index">{{ element.name }}</div> </draggable> </div> ``` #### 组件配置选项 设置 Vue 实例的数据模型以及监听器函数,以便处理当发生变动时触发的动作[^3]。 ```javascript new Vue({ el: '#app', components: { draggable, }, data() { return { listA: [ { name: 'John' }, { name: 'Joao' } ], listB: [ { name: 'Jean' }, { name: 'Gerard' } ] }; }, methods: { log(event){ console.log('Change:', event); } } }); ``` 上述代码片段展示了如何利用 `vuedraggable` 构建一个简单的双列布局,在此之上实现了项目间的互换位置及跨区转移的能力。每当有新的变化产生时,都会调用指定的日志记录方法来跟踪这些更改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值