Superset二次开发之完整版专题系列（持续更新ing）

### 关于 `vue2-draggable-plus` 的安装、使用教程以及示例代码 #### 安装指南 为了在项目中集成 `vue2-draggable-plus` 组件，可以通过 npm 或 yarn 进行安装： ```bash npm install vue-draggable-plus@next --save ``` 或者 ```bash yarn add vue-draggable-plus@next ``` 这一步骤确保了所使用的版本能够兼容 Vue 2[^1]。 #### 使用教程 ##### 导入并注册组件 在 Vue 项目的入口文件或所需页面引入该插件，并全局或局部注册 draggable 组件: ```javascript import { Draggable } from 'vue-draggable-plus'; Vue.component('draggable', Draggable); // 如果是在单文件组件内，则可以直接通过 components 属性来定义 components: { draggable, } ``` 上述方式使得可以在模板中直接使用 `<draggable>` 标签创建可拖动区域[^3]。 ##### 基本配置选项 当构建一个简单的拖拽列表时，可以设置一些基础属性如 `list`, `group` 等参数来自定义行为。例如： ```html <template> <div id="app"> <draggable v-model="items" group="people" @start="drag=true" @end="drag=false"> <transition-group type="transition" :name="'flip-list'"> <div v-for="(element, index) in items" :key="index">{{ element.name }}</div> </transition-group> </draggable> </div> </template> <script> export default { data() { return { items: [ { name: "John" }, { name: "Joao" }, { name: "Jean" } ] }; } }; </script> ``` 这段代码展示了如何利用 `v-model` 双向绑定数据源到拖拽项上，并监听拖拽事件以便执行特定逻辑处理[^2]。 #### 示例代码 下面给出的是两个列表之间互相交换元素的例子： ```html <template> <div class="row"> <!-- 左侧 --> <draggable class="col list-group" :list="list1" group="people" @change="log"> <div class="list-group-item" v-for="(item,index) in list1" :key="index">{{ item.name }}</div> </draggable> <!-- 中间分隔符 --> <!-- 右侧 --> <draggable class="col list-group" :list="list2" group="people" @change="log"> <div class="list-group-item" v-for="(item,index) in list2" :key="index">{{ item.name }}</div> </draggable> </div> </template> <script> export default { data() { return { list1: [{ name: "John" }, { name: "Joao" }], list2: [{ name: "Jean" }] }; }, methods: { log(event) { console.log(event); } } }; </script> ``` 此案例实现了双向拖放功能，在实际开发过程中可以根据需求调整样式和交互细节。