今天分享一個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 class='theme-setting'> <el-dialog :visible.sync='dialogVisible' :close-on-click-modal='false' > <div class='theme-left'> <dl class='theme-title'> <dt class='title'>當前選項</dt> <dd class='des'>從右側拖拽添加</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 class='theme-right'> <h3 class='theme-right-title'>全部選項</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='http://m.b3g6.com/assets/imgs/drapDrop/drag_drop_del.png' alt=''> </div> <span slot='footer' class='dialog-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>

總結

到此這篇關于Vue使用vue-draggable 插件在不同列表之間拖拽功能的文章就介紹到這了,更多相關vue vue-draggable 插件 拖拽內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！