拖拽

拖拽寫法

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))
  }
複製代碼