拖拽

拖拽写法

1, 需求效果图

2,html

<div>
    <p class="tips-wrapper">拖动区块跳转显示顺序</p>
    <div>
        <li class="listyle" v-for="item in hasChecked" :key="item.name">{{item.labelDesc}}
         </li>
        <draggable class="list-group" :list="hasChecked" @start="isDragging=true" @end="isDragging=false" :options="{handle: '.listyle'}">
          <transition-group type="transition" :name="'flip-list'" class="clearfix">
            <div class="draggable-list listyle" v-for="(item, index) in hasChecked" :key="item.id"> 
              {{item.labelDesc}}
            </div>
          </transition-group>
        </draggable> 
    </div>
    <p class="head-wrapper">选择显示列</p>
      <div class="checkboxgroup-div p-10-20">
        <CheckboxGroup v-model="fruitId" @on-change="changeChecked">
            <Checkbox v-for="item in AllDatas" :key="item.id" :label="item.id">
            {{item.labelDesc}}
            </Checkbox>
        </CheckboxGroup>
      </div>
    </div>
复制代码

• hasChecked 选择以后的数据
• AllDatas: 全部的数组数据

3,ts代码

get dragOptions () {
    return {
      animation: 0,
      group: 'description',
      // disabled: !this.editable,
      ghostClass: 'ghost'
    }
  }
  get listString () { // 监控值的改变
    return this.hasChecked && this.hasChecked.map(v => v.id)
  }
复制代码

changeChecked (row) { // checkboxchange事件
    // console.log('row', row) // 选择的id集合
    let checkedIds = this.hasChecked.map(v => v.id) // 拖动区块的id顺序
    let setArr = new Set([...row, ...checkedIds])
    let formArr = Array.from(setArr)
    let diffArr = [...formArr.filter(v => !row.includes(v)), ...formArr.filter(v => !checkedIds.includes(v))] // 拿到两个数组不一样的值
    let arr = checkedIds.filter(item => !diffArr.some(zitem => item === zitem))
    let arr2 = diffArr.filter(item => !checkedIds.some(zitem => item === zitem))
    let newArr = [...arr, ...arr2]
    let A = this.AllDatas // 全部的字段
    this.hasChecked = newArr.map(id => A.find(item => item.id === id))
  }
复制代码