uniapp的vuedraggable如何使用

在uniapp中如何使用vuedraggable实现拖拽排序功能？我按照官方文档引入组件后，发现拖拽效果不生效，控制台也没有报错。请问需要额外配置什么吗？具体代码应该怎么写才能实现列表项的拖拽排序？

2 回复

在UniApp中使用vuedraggable，先安装依赖：npm install vuedraggable。然后在页面引入：import draggable from 'vuedraggable'，注册组件。用<draggable>包裹列表，绑定v-model和:options即可实现拖拽排序。注意H5端兼容性较好，小程序端可能需要额外适配。


VueDraggable 在 UniApp 中的使用步骤如下：

  1. 安装依赖

    npm install vuedraggable

  2. 组件引入

    <script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: ['项目1', '项目2', '项目3']
    }
  }
}
</script>

  3. 模板使用

    <template>
  <view>
    <draggable v-model="list" @end="onDragEnd">
      <view v-for="item in list" :key="item" class="item">
        {{ item }}
      </view>
    </draggable>
  </view>
</template>

  4. 样式设置

    .item {
  padding: 20rpx;
  margin: 10rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
}

  5. 事件处理

    methods: {
  onDragEnd(evt) {
    console.log('新顺序:', this.list)
  }
}

注意事项：

  • 确保在 manifest.json 中配置 "transpiler": "vuedraggable"
  • 移动端需要添加拖拽样式反馈
  • 列表数据需要是响应式的

完整示例：

<template>
  <view class="container">
    <draggable v-model="myList" item-key="id">
      <template #item="{element}">
        <view class="list-item">
          {{ element.name }}
        </view>
      </template>
    </draggable>
  </view>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      myList: [
        {id: 1, name: '项目A'},
        {id: 2, name: '项目B'},
        {id: 3, name: '项目C'}
      ]
    }
  }
}
</script>

这样就能在 UniApp 中实现基础的拖拽排序功能了。

回到顶部