vue中draggable拖拽列表的使用

https://github.com/SortableJS/Vue.Draggable

官方示例：

https://sortablejs.github.io/Vue.Draggable/#/transition-example-2

https://david-desmaisons.github.io/draggable-example/

<draggable :options="{animation:380}"
          v-model="dataList"
          @change="change"
          @start="start"
          @end="end"
          :move="move">
    <li v-for="(item, index) in dataList"   :class="setclass(item,index)"  :key="index">
          {{item.name}}
    </li>
</draggable>

<script>
  methods:{
        //evt里面有兩個值，一個evt.added 和evt.removed  可以分別知道移動元素的ID和刪除元素的ID
     change (evt) {
          console.log(evt)
      },
      //start ,end ,add,update, sort, remove 得到的都差不多
      start (evt) { 
          console.log(evt)
      },
      end (evt) {
          console.log(evt)
          evt.item //可以知道拖動的本身
          evt.to    // 可以知道拖動的目標列表
          evt.from  // 可以知道之前的列表
          evt.oldIndex  // 可以知道拖動前的位置
          evt.newIndex  // 可以知道拖動后的位置
      },
      move (evt, originalEvent) {
          console.log(evt)
          console.log(originalEvent) //鼠標位置
      }
  }
</script>

option屬性配置

 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