Vue使用vue-draggable 插件在不同列表之間拖拽功能

更新時(shí)間：2020年03月12日 08:47:10 作者：LanceGao

這篇文章主要介紹了使用vue-draggable 插件在不同列表之間拖拽,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

今天分享一個(gè)vue項(xiàng)目中在不同列表拖拽設(shè)置選項(xiàng)的功能，這個(gè)功能也是在做項(xiàng)目中遇到的，先說下這個(gè)功能的要點(diǎn)(參考下圖)，有2個(gè)列表，左側(cè)列表展示已選，右側(cè)列表展示未選，通過拖拽進(jìn)行設(shè)置，已選的選項(xiàng)不能超過4個(gè)，超過的話自動(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 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="設(shè)置選項(xiàng)"
 :visible.sync="dialogVisible"
 width="648px"
 :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 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">全部選項(xiàng)</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="">
 </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)過濾出來，并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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: