Vue使用vue-draggable 外掛在不同列表之間拖拽功能
阿新 • • 發佈:2020-03-13
今天分享一個vue專案中在不同列表拖拽設定選項的功能,這個功能也是在做專案中遇到的,先說下這個功能的要點(參考下圖),有2個列表,左側列表展示已選,右側列表展示未選,通過拖拽進行設定,已選的選項不能超過4個,超過的話自動將拖拽之前的最後一項清除到右側,且如果從已選往未選裡拖的時候,右側顯示垃圾桶的提示(如圖)。
拖拽功能圖片:
垃圾桶顯示圖:
首先講講vue-draggable的使用
安裝vue-draggable:
npm install vuedraggable
在使用外掛的元件內引入vue-draggable並註冊元件:
import draggable from "vuedraggable" components: { draggable }
然後在我們需要拖拽的列表中使用:
<draggable class="selected-list" tag="ul" v-model="selectedTheme" v-bind="dragOptions" :move="onMove" @end="onEnd" > <li class="selected-theme" v-for="item in selectedTheme" :key="item.type" >{{item.name}}</li> </draggable>
下面是拖拽功能元件的完整程式碼:
<template> <div class="theme-setting"> <el-dialog title="設定選項" :visible.sync="dialogVisible" width="648px" :close-on-click-modal="false" > <div class="theme-left"> <dl class="theme-title"> <dt class="title">當前選項</dt> <dd class="des">從右側拖拽新增</dd> </dl> <draggable class="selected-list" tag="ul" v-model="selectedTheme" v-bind="dragOptions" :move="onMove" @end="onEnd" > <li class="selected-theme" v-for="item in selectedTheme" :key="item.type" >{{item.name}}</li> </draggable> </div> <div class="theme-right"> <h3 class="theme-right-title">全部選項</h3> <draggable class="theme-right-list" tag="ul" v-model="unSelectTheme" v-bind="dragOptions" :move="onMove" @end="onEnd"> <li class="theme-right-item" v-for="item in unSelectTheme" :key="item.type" >{{item.name}}</li> </draggable> </div> <div class="drag-drop-del" v-show="isShowDel"> <img src="../assets/imgs/drapDrop/drag_drop_del.png" alt="Vue使用vue-draggable 外掛在不同列表之間拖拽功能"> </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,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,0.1); .theme-left { width: 218px; margin-left: 24px; border-right: 1px solid rgba(13,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,1); line-height:19px; } .des { height:16px; font-size:12px; font-family:MicrosoftYaHei; color:rgba(13,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,1); } } } .theme-right { padding: 0 24px; .theme-right-title { padding-top: 24px; height:19px; font-size:14px; font-family:MicrosoftYaHei-Bold,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,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 外掛 拖拽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!