今天分享一個(gè)vue項(xiàng)目中在不同列表拖拽設(shè)置選項(xiàng)的功能，這個(gè)功能也是在做項(xiàng)目中遇到的，先說(shuō)下這個(gè)功能的要點(diǎn)(參考下圖)，有2個(gè)列表，左側(cè)列表展示已選，右側(cè)列表展示未選，通過(guò)拖拽進(jìn)行設(shè)置，已選的選項(xiàng)不能超過(guò)4個(gè)，超過(guò)的話自動(dòng)將拖拽之前的最后一項(xiàng)清除到右側(cè)，且如果從已選往未選里拖的時(shí)候，右側(cè)顯示垃圾桶的提示(如圖)。

拖拽功能圖片：

垃圾桶顯示圖：

首先講講vue-draggable的使用

安裝vue-draggable:

npm install vuedraggable

在使用插件的組件內(nèi)引入vue-draggable并注冊(cè)組件:

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'>當(dāng)前選項(xiàng)</dt> <dd class='des'>從右側(cè)拖拽添加</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'>全部選項(xiàng)</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://www.hdgsjgj.cn/assets/imgs/drapDrop/drag_drop_del.png' alt=''> </div> <span slot='footer' class='dialog-footer'> <el-button @click='restoreDefault'>恢復(fù)默認(rèn)設(shè)置</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: ’選項(xiàng)1’ }, { type: 2, name: ’選項(xiàng)2’ }, { type: 3, name: ’選項(xiàng)3’ }, { type: 4, name: ’選項(xiàng)4’ }], // 已選主題列表 unSelectTheme: [{ type: 5, name: ’選項(xiàng)5’ }, { type: 6, name: ’選項(xiàng)6’ }], // 未選主題列表 backSelectedTheme: [], // 選主題列表備份 backUnSelectTheme: [], // 未選主題列表備份用于恢復(fù)默認(rèn)設(shè)置 relatedListLast: {}, // 已選主題列表最后一項(xiàng) 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) { // 判斷往已選列表拖時(shí)，如果已經(jīng)滿足4項(xiàng)，則記錄已選列表的最后一項(xiàng) // 拖拽結(jié)束時(shí)將此項(xiàng)清除到未選列表中 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項(xiàng)，將記錄的最后一項(xiàng)過(guò)濾出來(lái)，并push到未選列表數(shù)組 this.selectedTheme = this.selectedTheme.filter(item => { return item.type != this.relatedListLast.type }) this.unSelectTheme.push(this.relatedListLast) } } if (dragInEl === ’theme-right-list’) { // 判斷是往未選列表拖時(shí)，拖拽結(jié)束時(shí)將垃圾桶隱藏 this.isShowDel = false } }, // 保存設(shè)置 saveThemeSet() { const params = { taskTopicList: this.selectedTheme } if (this.selectedTheme.length !== 4) { Message({ type: ’error’, message: ’需設(shè)置4個(gè)選項(xiàng) !’ }) return false } $ajax.save(params).then(data => { this.dialogVisible = false Message({ type: ’success’, message: ’保存成功！’ }) this.$parent.refresh() }).catch(err => { console.log(err) }) }, // 恢復(fù)默認(rèn)設(shè)置 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>

總結(jié)

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