vuedraggable 如何导入到uniapp中使用

在uniapp项目中想使用vuedraggable实现拖拽排序功能，但按照常规Vue的引入方式报错。尝试过npm安装vuedraggable后通过import导入，但运行时提示找不到模块。请问在uniapp中应该如何正确引入和使用vuedraggable组件？是否需要特殊配置或使用兼容版本？

2 回复

在uniapp中安装vuedraggable：

  1. npm install vuedraggable
  2. 在页面中引入：
import draggable from 'vuedraggable'
export default {
  components: { draggable }
}

注意：部分功能可能不兼容，建议测试后再使用。


在 UniApp 中使用 vuedraggable 需要适配，因为 UniApp 基于 Vue.js 但运行在小程序或 H5 等环境，而 vuedraggable 依赖 HTML5 拖拽 API，可能在小程序中不兼容。以下是导入和使用方法：

  1. 安装 vuedraggable
    在项目根目录执行：

    npm install vuedraggable

  2. 在页面或组件中导入
    在 <script> 部分引入：

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

  3. 在模板中使用
    在 <template> 中添加：

    <draggable v-model="list">
  <div v-for="(item, index) in list" :key="index">
    {{ item }}
  </div>
</draggable>

注意事项：

  • 平台兼容性：vuedraggable 主要依赖 HTML5 拖拽，在 H5 环境 可能正常工作，但在 小程序 中可能无法使用（小程序缺乏 DOM 和拖拽 API）。
  • 替代方案：如果需在小程序实现拖拽，推荐使用 UniApp 内置组件（如 movable-area 和 movable-view）或寻找小程序兼容库。
  • 测试：建议先在 H5 环境测试，再检查其他平台。

如果仅用于 H5，以上方法可行；若需多端支持，请考虑平台特定实现。

回到顶部