如何在Vue中利用vue-draggable 插件實現在不同列表間的拖拽功能

如何在Vue中利用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">
  <h4 class="theme-right-title">全部選項</h4>
  <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">恢復默認設置</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, h2, h4{
 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>

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。