vue3中使用draggable插件實現元素的拖拽,排序，克隆

vue2.x版本中利用draggable插件實現元素的拖拽,排序，克隆的例子網上有很多，這里不再贅述，有篇文章寫得很不錯，可以參考：https://blog.csdn.net/blue__k/article/details/120202902

但在vue3中，使用vue2.x中draggable的寫法時會報錯：Cannot read property ‘header’ of undefined

這個問題是draggable的版本不對，換為"vuedraggable": "^4.1.0"這個版本就好了

效果圖

 

 

 

安裝

npm i vuedraggable@4.1.0 --save
npm install sortablejs --save  （拖拽組件依賴sortablejs ，如果項目沒有安裝sortablejs ，需要安裝一下）

引入

import Draggable from 'vuedraggable'

關鍵代碼

　　<Draggable :list="list2" item-key="id" :animation="100" :sort='false' :group="{name: 'article',pull:'clone'}"  @end="end1" class="dragArea1">
      <template #item="{ element }"  >
        <div class="list-complete-item1">
          <div class="list-complete-item-handle2"> {{element.name}}</div>
        </div>
      </template>
    </Draggable>

注：vue2.x版本Draggable 組件中的配置項寫法（:options="{group:{name: 'article',pull:'clone'}, sort: false}"）在vue3中不起效，

vue3中需要將里面的參數單獨進行配置，如：:group="{name: 'article',pull:'clone'}"     :sort='false'  等

兩個盒子之間的內容能夠克隆，需要將兩個group的name配置為一樣，並在group中配置 pull:'clone'

如果不希望第二個盒子中的內容被拖到第一個盒子中，將第二個盒子中的pull改為空：pull:' '

部分Draggable API

 group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的組可以互相拖動
 sort: true,  // 內部排序列表
 delay: 0, // 以毫秒為單位定義排序何時開始。
 touchStartThreshold: 0, // px,在取消延遲拖動事件之前，點應該移動多少像素?
 disabled: false, // 如果設置為真，則禁用sortable。
 store: null,  // @see Store
 animation: 150,  // ms, 動畫速度運動項目排序時，' 0 ' -沒有動畫。
 handle: ".my-handle",  // 在列表項中拖動句柄選擇器。
 filter: ".ignore-elements",  // 不導致拖拽的選擇器(字符串或函數)
 preventOnFilter: true, // 調用“event.preventDefault()”時觸發“filter”
 draggable: ".item",  // 指定元素中的哪些項應該是可拖動的。
 ghostClass: "sortable-ghost",  // 設置拖動元素的class的占位符的類名。
 chosenClass: "sortable-chosen",  // 設置被選中的元素的class
 dragClass: "sortable-drag",  //拖動元素的class。
 dataIdAttr: 'data-id',
 forceFallback: false,  // 忽略HTML5的DnD行為，並強制退出。（h5里有個屬性也是拖動，這里是為了去掉H5拖動對這個的影響
 fallbackClass: "sortable-fallback",  // 使用forceFallback時克隆的DOM元素的類名。
 fallbackOnBody: false,  // 將克隆的DOM元素添加到文檔的主體中。（默認放在被拖動元素的同級）
 fallbackTolerance: 0, // 用像素指定鼠標在被視為拖拽之前應該移動的距離。
 scroll: true, // or HTMLElement
 scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }
 scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
 scrollSpeed: 10, // px

 

全部代碼

<template>
  <div class="dragList">
    <div class="dragList-list1">
      <h3 style="text-align:center">標簽選擇</h3>
      <Draggable :list="list2" item-key="id" :animation="100" :sort='false' :group="{name: 'article',pull:'clone'}"  @end="end1" class="dragArea1">
        <template #item="{ element }"  >
          <div class="list-complete-item1">
            <div class="list-complete-item-handle2"> {{element.name}}</div>
          </div>
        </template>
      </Draggable>
    </div>

    <div class="dragList-list2">
      <h3 style="text-align:center">拖動至此處</h3>
      <Draggable :list="list1" item-key="id"  :group="{name: 'article',pull:''}"  :disabled="false"  @start="start2" @end="end2" class="dragArea2" >
        <template #item="{ element,index }" >
          <div class="list-complete-item2">
            <div class="list-complete-item-handle">{{element.name}}</div>
            <div>
              <i class="el-icon-delete"  @click="handleDel(index, element.id)"></i>
            </div>
          </div>
        </template>
      </Draggable>
    </div>
  </div>
</template>

<script>
import {ref,reactive} from 'vue'
import Draggable from 'vuedraggable'

export default {
  components: {
    Draggable
  },
  setup() {
    const disabled = ref(false)
    const list1 = reactive([])
    const list2 = reactive(
      [
        {id: 1, name: '標簽1'}, 
        {id: 2, name: '標簽2'}, 
        {id: 3, name: '標簽3'}, 
        {id: 4, name: '標簽4'}, 
        {id: 5, name: '標簽5'}, 
      ]
    )
    const end1 = (ev) => {
      console.log("拖動結束1",ev)
    }
    const start2 = (event) => {
      console.log("開始拖動",event)
    }
    const end2 = (ev) => {
      console.log("拖動結束2",ev)
    }
    const handleDel = (index, id) => {
      list1.splice(index, 1)
      let q = list2.find((value, index, arr) => {
        return value.id === id
      })
    }
    return {
      disabled,
      list1,
      list2,
      end1,
      start2,
      end2,
      handleDel
    }
  }
}
</script>

<style lang="scss"  scoped>
  .dragList{
    width: 500px;
    height:300px;
    padding: 20px;
  }
  .dragList-list1{
    width: 120px;
  }
  .list-complete-item1{
    cursor: pointer;
    font-size: 14px;
    padding: 0 12px;
    display: inline-block;
    margin-bottom: 10px;
    width: 100px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #bfcbd9;
    transition: all 1s;
  }
  .dragArea1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .dragList-list2{
    margin-top: 20px;
    height: 200px;
    border: 1px solid #8a8a8a;
  }
  .dragArea2{
    display: flex;
    align-items: center;
  }
  .list-complete-item2 {
    cursor: pointer;
    font-size: 14px;
    padding: 0 12px;
    display: inline-block;
    margin: 10px;
    width: 100px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #bfcbd9;
    transition: all 1s;
  }
</style>