vue拖拽克隆clone元件API， vue.draggable實現盒子之間相互拖拽排序克隆（網上資源整理的文件）

效果圖：

首先需要安裝vuedraggable依賴包：

npm install vuedraggable --save

複製vue html程式碼到專案：

<template>
  <div class="dndList">
    <div class="dndList-list">
      <h3>常用</h3>
      <draggable :list="list1"
 
 :options="{group:'article', disabled: disabled}"
                 @start="start22"
                 @end="end22"
                 class="dragArea11"
                 style="height: 100px">
        <div v-for="(element, index) in list1" :key="element.id" class="list-complete-item">
          <
 
div class="list-complete-item-handle">{{element.name}}</div>
          <div>
            <i class="el-icon-delete" @click="handleDel(index, element.id)"></i>
          </div>
        </div>
      </draggable>
    </div>
    <div style="width: 100%; height: 10px; background-color: #bfbfbf"
 
></div>
    <div class="dndList-list">
      <h3>所有</h3>
      <draggable :list="list2" :options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"
                 @end="end"
                 class="dragArea">
        <div v-for="element in list2" :key="element.id"
             :class="{undraggable : element.flag}"
             class="list-complete-item">
          <div class="list-complete-item-handle2"> {{element.name}}</div>
        </div>
      </draggable>
    </div>
  </div>
</template>

下面是vue js程式碼（包含css樣式）：

<script>
import draggable from 'vuedraggable'
 
export default {
  name: 'DndList',
  components: { draggable },
  watch: {
  },
  data () {
    return {
      falgs: 'article',
      disabled: false,
      list1: [],
      list2: [{id: 1, name: 1}, {id: 2, name: 2}, {id: 3, name: 3}, 
　　　　　　　　　{id: 4, name: 4}, {id: 5, name: 5}, {id: 6, name: 6}, 
　　　　　　　　　　{id: 7, name: 7}, {id: 8, name: 8}, {id: 9, name: 9}, {id: 10, name: 10}
　　　　　　　　]
    }
  },
  computed: {
  },
  methods: {
    end (ev) {
      if (ev.to.className === 'dragArea11') {
        this.$set(this.list2[ev.oldIndex], 'flag', true)
      }
    },
    start22 (event) {
      this.falgs = '222222'
    },
    end22 (ev) {
      this.falgs = 'article'
    },
    handleDel (index, id) {
      this.list1.splice(index, 1)
      let q = this.list2.find((value, index, arr) => {
        return value.id === id
      })
      this.$set(q, 'flag', false)
    }
  }
}
</script>
 
<style rel="stylesheet/scss" lang="scss" scoped>
 
  .list-complete-item {
    cursor: pointer;
    position: relative;
    font-size: 14px;
    padding: 5px 12px;
    display: inline-block;
    margin-right: 20px;
    width: 50px;
    height: 50px;
    border: 1px solid #bfcbd9;
    transition: all 1s;
  }
 
  .list-complete-item.sortable-chosen {
    background: #4AB7BD;
  }
 
  .list-complete-item.sortable-ghost {
    background: #30B08F;
  }
  .undraggable {
    background-color: red;
  }
 
  .list-complete-enter,
  .list-complete-leave-active {
    opacity: 0;
  }
</style>

專案中options配置項的說明：

:options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"

1、要實現兩個元件之間的拖拽，需要兩個元件的options的 group 名稱保持一致！ group：'111'或者group:{name:'111'}，寫法都可以。
2、group裡面的 pull:'clone' 表示克隆拖拽的項，這樣配置之後，會保留被拖拽的項。
3、filter: '.undraggable' , .undraggable 在本案例中，實際上是取得html的動態樣式 undraggable的值（true或者false），用來配置某個元件是否可以重複被拖拽，
在本案例中，拖拽一次，就被禁止再次拖拽。
4、sort，值為true或者false，是否允許拖拽排序。
5、disabled，值為true或者false，是否允許其他專案被拖拽到本元件中，false同時也禁止了本元件的拖拽功能。

下面是比較全面的配置項API options說明，以及事件說明：

  group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
  sort: true, // sorting inside list
  delay: 0, // time in milliseconds to define when the sorting should start
  touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
  disabled: false, // Disables the sortable if set to true.
  store: null, // @see Store
  animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
  handle: ".my-handle", // Drag handle selector within list items
  filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
  preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
  draggable: ".item", // Specifies which items inside the element should be draggable
  ghostClass: "sortable-ghost", // Class name for the drop placeholder
  chosenClass: "sortable-chosen", // Class name for the chosen item
  dragClass: "sortable-drag", // Class name for the dragging item
  dataIdAttr: 'data-id',
 
  forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in
 
  fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback
  fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
  fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.
 
  scroll: true, // or HTMLElement
  scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, 
  // if you have custom scrollbar scrollFn may be used for autoscrolling

  scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
  scrollSpeed: 10, // px
 
  setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
    dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
  },
 
  // Element is chosen
  onChoose: function (/**Event*/evt) {
    evt.oldIndex; // element index within parent
  },
 
  // Element dragging started
  onStart: function (/**Event*/evt) {
    evt.oldIndex; // element index within parent
  },
 
  // Element dragging ended
  onEnd: function (/**Event*/evt) {
    var itemEl = evt.item; // dragged HTMLElement
    evt.to;  // target list
    evt.from; // previous list
    evt.oldIndex; // element's old index within old parent
    evt.newIndex; // element's new index within new parent
  },
 
  // Element is dropped into the list from another list
  onAdd: function (/**Event*/evt) {
    // same properties as onEnd
  },
 
  // Changed sorting within list
  onUpdate: function (/**Event*/evt) {
    // same properties as onEnd
  },
 
  // Called by any change to the list (add / update / remove)
  onSort: function (/**Event*/evt) {
    // same properties as onEnd
  },
 
  // Element is removed from the list into another list
  onRemove: function (/**Event*/evt) {
    // same properties as onEnd
  },
 
  // Attempt to drag a filtered element
  onFilter: function (/**Event*/evt) {
    var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
  },
 
  // Event when you move an item in the list or between lists
  onMove: function (/**Event*/evt, /**Event*/originalEvent) {
    // Example: http://jsbin.com/tuyafe/1/edit?js,output
    evt.dragged; // dragged HTMLElement
    evt.draggedRect; // TextRectangle {left, top, right и bottom}
    evt.related; // HTMLElement on which have guided
    evt.relatedRect; // TextRectangle
    originalEvent.clientY; // mouse position
    // return false; — for cancel
  },
 
  // Called when creating a clone of element
  onClone: function (/**Event*/evt) {
    var origEl = evt.item;
    var cloneEl = evt.clone;
  }