今天分享一个vue项目中在不同列表拖拽设置选项的功能，这个功能也是在做项目中遇到的，先说下这个功能的要点(参考下图)，有2个列表，左侧列表展示已选，右侧列表展示未选，通过拖拽进行设置，已选的选项不能超过4个，超过的话自动将拖拽之前的最后一项清除到右侧，且如果从已选往未选里拖的时候，右侧显示垃圾桶的提示(如图)。
拖拽功能图片：
垃圾桶显示图：
首先讲讲vue-draggable的使用
安装vue-draggable:
npm install vuedraggable
在使用插件的组件内引入vue-draggable并注册组件:
import draggable from "vuedraggable" components: { draggable }
然后在我们需要拖拽的列表中使用：
<draggable tag="ul" v-model="selectedTheme" v-bind="dragOptions" :move="onMove" @end="onEnd" > <li v-for="item in selectedTheme" :key="item.type" >{{item.name}}</li> </draggable>
下面是拖拽功能组件的完整代码：
<template> <div> <el-dialog title="设置选项" :visible.sync="dialogVisible" :close-on-click-modal="false" > <div> <dl> <dt>当前选项</dt> <dd>从右侧拖拽添加</dd> </dl> <draggable tag="ul" v-model="selectedTheme" v-bind="dragOptions" :move="onMove" @end="onEnd" > <li v-for="item in selectedTheme" :key="item.type" >{{item.name}}</li> </draggable> </div> <div> <h3>全部选项</h3> <draggable tag="ul" v-model="unSelectTheme" v-bind="dragOptions" :move="onMove" @end="onEnd"> <li v-for="item in unSelectTheme" :key="item.type" >{{item.name}}</li> </draggable> </div> <div v-show="isShowDel"> <img src="https://www.jb51.net/assets/imgs/drapDrop/drag_drop_del.png" alt=""> </div> <span slot="footer"> <el-button @click="restoreDefault">恢复默认设置</el-button> <el-button type="primary" @click="saveThemeSet">保存</el-button> </span> </el-dialog> </div> </template> <script> import {Message} from 'element-ui' import draggable from "vuedraggable" export default { name: 'DragDrop', components: { draggable }, data() { return { dialogVisible: false, selectedTheme: [{ type: 1, name: '选项1' }, { type: 2, name: '选项2' }, { type: 3, name: '选项3' }, { type: 4, name: '选项4' }], // 已选主题列表 unSelectTheme: [{ type: 5, name: '选项5' }, { type: 6, name: '选项6' }], // 未选主题列表 backSelectedTheme: [], // 选主题列表备份 backUnSelectTheme: [], // 未选主题列表备份用于恢复默认设置 relatedListLast: {}, // 已选主题列表最后一项 isShowDel: false } }, methods: { showDrag() { this.dialogVisible = true }, onMove({ relatedContext, draggedContext, to }) { const relatedElement = relatedContext.element const draggedElement = draggedContext.element let dragInEl = to['className'] if (dragInEl == 'selected-list') { this.isShowDel = false if (this.selectedTheme.length === 4) { // 判断往已选列表拖时，如果已经满足4项，则记录已选列表的最后一项 // 拖拽结束时将此项清除到未选列表中 this.relatedListLast = this.selectedTheme[this.selectedTheme.length-1] } } else { this.isShowDel = true // 判断如果是往未选列表里拖的话显示垃圾桶 } return ( (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed ) }, onEnd(dragObj) { let dragInEl = dragObj.to['className'] if (dragInEl == 'selected-list') { if (this.selectedTheme.length > 4) { // 判断已选列表大于4项，将记录的最后一项过滤出来，并push到未选列表数组 this.selectedTheme = this.selectedTheme.filter(item => { return item.type != this.relatedListLast.type }) this.unSelectTheme.push(this.relatedListLast) } } if (dragInEl === 'theme-right-list') { // 判断是往未选列表拖时，拖拽结束时将垃圾桶隐藏 this.isShowDel = false } }, // 保存设置 saveThemeSet() { const params = { taskTopicList: this.selectedTheme } if (this.selectedTheme.length !== 4) { Message({ type: 'error', message: '需设置4个选项 !' }) return false } $ajax.save(params).then(data => { this.dialogVisible = false Message({ type: 'success', message: '保存成功！' }) this.$parent.refresh() }).catch(err => { console.log(err) }) }, // 恢复默认设置 restoreDefault() { this.selectedTheme = this.backSelectedTheme this.unSelectTheme = this.backUnSelectTheme } }, computed: { dragOptions() { return { animation: 0, group: "description", disabled: false, ghostClass: "ghost" } } } }; </script> <style lang="less" scoped> body, ul, dl, dt, dd, li, h1, h3{ margin: 0; padding: 0; } ul, ol, li { list-style: none; } .theme-setting { /deep/.el-dialog { height: 476px; border-radius: 6px; .el-dialog__header { height: 55px; line-height: 56px; padding: 0; border-bottom: 1px solid rgba(13,20,30, 0.1); .el-dialog__title { height:21px; font-size:16px; font-family:MicrosoftYaHei-Bold,MicrosoftYaHei; font-weight:bold; color:rgba(13,20,30,1); line-height:21px; } .el-dialog__headerbtn { margin-top: -4px; } } .el-dialog__body { position: relative; display: flex; height: 331px; padding: 0; border-bottom: 1px solid rgba(13,20,30, 0.1); .theme-left { width: 218px; margin-left: 24px; border-right: 1px solid rgba(13,20,30, 0.1); .theme-title { display: flex; margin-top: 24px; .title { height:19px; margin-right: 4px; font-size:14px; font-family:MicrosoftYaHei-Bold,MicrosoftYaHei; font-weight:bold; color:rgba(13,20,30,1); line-height:19px; } .des { height:16px; font-size:12px; font-family:MicrosoftYaHei; color:rgba(13,20,30,0.6); line-height:19px; } } .selected-list { height: 240px; margin-top: 24px; overflow: hidden; .selected-theme { width:160px; height:48px; line-height:48px; text-align: center; margin-bottom: 16px; cursor: pointer; background:linear-gradient(180deg,rgba(43,46,83,1) 0%,rgba(108,116,150,1) 100%); border-radius:6px; font-size:14px; font-family:MicrosoftYaHei; color:rgba(255,255,255,1); } } } .theme-right { padding: 0 24px; .theme-right-title { padding-top: 24px; height:19px; font-size:14px; font-family:MicrosoftYaHei-Bold,MicrosoftYaHei; font-weight:bold; color:rgba(13,20,30,0.4); line-height:19px; } .theme-right-list { width: 357px; height: 240px; overflow: scroll; margin-top: 24px; .theme-right-item { width: 160px; height:48px; line-height:48px; float: left; margin-right: 16px; margin-bottom: 16px; background:rgba(247,248,252,1); border-radius:6px; font-size:14px; font-family:MicrosoftYaHei; color:rgba(13,20,30,0.4); text-align: center; cursor: pointer; } } .theme-right-list::before, .theme-right-list::after { content: ""; display: table; } .theme-right-list::after { clear: both; } } .drag-drop-del { position: absolute; right: 1px; top: 0; width: 404px; height: 331px; display: flex; justify-content: center; align-items: center; background-image: url('../../src/assets/imgs/drapDrop/drag_drop.png'); img { width: 96px; height: 96px; } } } .el-dialog__footer { height: 88px; padding: 24px 24px 0; .dialog-footer { .el-button+.el-button { margin-left: 16px; } } } } } </style>
总结