【JavaScript源代码】vue element el-transfer增加拖拽功能.docx

vue element el-transfer增加拖拽功能 　　芯资管项目要求el-transfer增加拖拽排序，左右上下互相拖拽功能； 原来的组件不支持拖拽，这里要用个第三方脱宅组件sortablejs　　首先安装　　sudo npm i sortablejs --save-dev　　html代码　　  <template>　　  <el-transfer ref="transfer" id="transfer" v-model="value" :data="data">　　   <span slot-scope="{ option }" :draggable="!option.disabl 在Vue.js项目中，Element UI库的`el-transfer`组件是一个非常实用的工具，用于在两个列表之间进行数据传输。然而，原生的`el-transfer`并不直接支持拖拽排序功能。为了满足芯资管项目的需求，我们需要利用第三方库SortableJS来增加这个特性。 我们需要通过npm安装SortableJS： ```bash sudo npm i sortablejs --save-dev ``` 在HTML模板中，我们需要对`el-transfer`的每个选项元素设置`draggable`属性，以便启用拖拽功能。同时，我们需要监听`dragstart`事件来处理拖动开始时的操作： ```html <template> <el-transfer ref="transfer" id="transfer" v-model="value" :data="data"> <span slot-scope="{ option }" :draggable="!option.disabled" @dragstart="drag($event, option)">{{ option.key }} - {{ option.label }}</span> </el-transfer> </template> ``` 在`script`部分，我们导入SortableJS库并实现数据模型及拖拽事件的处理： ```javascript <script> import Sortable from 'sortablejs'; export default { data() { const generateData = () => { const data = []; for (let i = 1; i <= 15; i++) { data.push({ key: i, label: `备选项 ${i}`, disabled: i % 4 === 0 }); } return data; }; return { data: generateData(), value: [1, 4], draggingKey: null }; }, mounted() { const transfer = this.$refs.transfer.$el; const leftPanel = transfer.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0]; const rightPanel = transfer.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0]; // 对右侧列表创建Sortable实例并监听拖拽结束事件 const rightEl = rightPanel.getElementsByClassName("el-transfer-panel__list")[0]; Sortable.create(rightEl, { onEnd: (evt) => { const { oldIndex, newIndex } = evt; const temp = this.value[oldIndex]; if (!temp || temp === 'undefined') { return; // 解决右边最后一项从右边拖左边，有undefined的问题 } this.$set(this.value, oldIndex, this.value[newIndex]); this.$set(this.value, newIndex, temp); } }); // 对左侧列表创建Sortable实例并监听拖拽结束事件 const leftEl = leftPanel.getElementsByClassName("el-transfer-panel__list")[0]; Sortable.create(leftEl, { onEnd: (evt) => { const { oldIndex, newIndex } = evt; const temp = this.data[oldIndex]; if (!temp || temp === 'undefined') { return; } // 调整数据数组顺序 this.$set(this.data, oldIndex, this.data[newIndex]); this.$set(this.data, newIndex, temp); // 更新选中值 this.$set(this.value, oldIndex, this.value[newIndex]); this.$set(this.value, newIndex, temp); } }); }, methods: { drag(event, option) { // 在这里可以添加拖动开始时的逻辑，例如记录当前拖动的key this.draggingKey = option.key; } } }; </script> ``` 通过以上代码，我们就成功地为`el-transfer`组件增加了拖拽排序功能，用户现在可以在左右两个列表之间以及列表内部自由拖动选项，实现数据的动态排序。同时，我们也处理了在拖拽过程中可能出现的边界情况，如从右边拖动最后一项到左边时避免出现`undefined`的问题。