Vue 는 vue-draggable 플러그 인 을 사용 하여 목록 사이 에서 끌 어 당 기 는 기능 을 사용 합 니 다.

오늘 은 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="">
 </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 플러그 인 끌 어 당 기 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!