基于vuedraggable實作拖拽功能

部落格位址：http://www.globm.top/blog/1/detail/31

安裝

頁面引用

簡易使用

template

<draggable v-model="fileList" @update="fileDragEnd" v-bind="dragOptions">
  <transition-group tag="ul"  class="fileList">
    <li v-for="(item,ins) in fileList" :key="ins"></li>
  </transition-group>
</draggable>
           

script

import draggable from 'vuedraggable'
export default({
	name:'drag',
	data () {
	    return {
	      fileList: [],
	      dragOptions: { forceFallback: true, animation: 100, sort: false }
	    }
	},
	components: {
	 	draggable
	},
	methods:{
		fileDragEnd (evt) {
	      console.log(evt)
	      //evt.item //可以知道拖動的本身
	      //evt.to    // 可以知道拖動的目标清單
	      //evt.from  // 可以知道之前的清單
	      //evt.oldIndex  // 可以知道拖動前的位置
	      //evt.newIndex  // 可以知道拖動後的位置
	    }
	}
})
           

參數詳解

以上内容僅作簡易使用drag功能參考，vuedraggable還支援很多參數和屬性，下面貼一下部分屬性，若有需要建議參考官方文檔：

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

Sortable https://github.com/SortableJS/Sortable

事件

@update="update"
@change="change"
@start="start"
@end="end"
:move="move"
           

update(evt) {
 console.log(evt)
 },
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) //滑鼠位置
 }
           

屬性

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) { ... }, // 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
           

slot

使用footer插槽在vuedraggable元件内添加不可拖動的元素。重要:它應該與可拖動選項一起使用，以标記可拖拽元素。注意，在預設情況下，頁腳槽将始終被添加

<draggable v-model="myArray" :options="{draggable:'.item'}">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>