Vue-Draggable-Plus CDN版本使用指南

Vue-Draggable-Plus是一个基于Vue 3的拖拽排序组件库，提供了简单易用的API来实现元素的拖拽排序功能。本文将详细介绍如何在项目中通过CDN方式使用Vue-Draggable-Plus组件。

CDN引入方式

使用CDN方式引入Vue-Draggable-Plus需要两个步骤：

1. 首先引入Vue 3的CDN文件
2. 然后引入Vue-Draggable-Plus的CDN文件

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-draggable-plus@0.4.0/dist/vue-draggable-plus.iife.min.js"></script>

基本使用示例

下面是一个完整的CDN使用示例，展示了如何创建一个可拖拽的列表：

<div id="app">
  <div ref="elRef">
    <div class="item" v-for="item in items" :key="item.id">
      {{item.name}}
    </div>
  </div>
</div>

<script>
  const { VueDraggable, useDraggable } = VueDraggablePlus
  
  Vue.createApp({
    components: { VueDraggable },
    setup() {
      const items = Vue.ref([
        { id: 1, name: 'item1' },
        { id: 2, name: 'item2' },
        { id: 3, name: 'item3' },
        { id: 4, name: 'item4' }
      ])

      const elRef = Vue.ref(null)
      useDraggable(elRef, items, { animation: 150 })
      
      return {
        items,
        elRef
      }
    }
  }).mount('#app')
</script>

关键点解析

1. 组件注册：通过VueDraggablePlus全局变量获取组件和组合式API
2. 数据绑定：使用Vue的ref创建响应式数据
3. 拖拽容器：通过ref获取DOM元素引用
4. useDraggable：使用组合式API设置拖拽功能，参数包括：
   • 容器元素引用
   • 数据数组
   • 配置选项（如动画时长）

常见问题解决

如果在使用过程中遇到"Component is missing template or render function"警告，请检查：

1. 是否正确引入了Vue 3和Vue-Draggable-Plus的CDN文件
2. 是否正确注册了VueDraggable组件
3. 是否在setup函数中正确返回了模板所需的数据

进阶配置

useDraggable的第三个参数可以配置更多选项：

useDraggable(elRef, items, {
  animation: 200, // 动画时长
  handle: '.handle', // 指定拖拽手柄
  group: 'shared', // 分组名称
  ghostClass: 'ghost', // 拖拽时的幽灵类名
  chosenClass: 'chosen' // 选中元素的类名
})

通过CDN方式使用Vue-Draggable-Plus可以快速在项目中集成拖拽功能，特别适合简单的项目原型或快速演示场景。对于更复杂的项目，建议使用npm/yarn等包管理工具进行安装。