Vue.Draggable 文檔總結

本文章轉自https://blog.csdn.net/zjiang1994/article/details/79809687

Vue.Draggable學習總結 Draggable爲基於Sortable.js的vue組件，用以實現拖拽功能。

特性 支持觸摸設備 支持拖拽和選擇文本 支持智能滾動 支持不同列表之間的拖拽 不以jQuery爲基礎 和視圖模型同步刷新 和vue2的國度動畫兼容 支持撤銷操作 當需要完全控制時，可以拋出所有變化 可以和現有的UI組件兼容 安裝 npm install vuedraggable 1 引入 import draggable from 'vuedraggable' 1 基礎用法 定義一個json串 list，實現它的拖拽排序。

<template>
  <div>
    <!-- 調用組件  -->
    <draggable element="ul" v-model="list">
      <li v-for="item in list">{{item.name}}</li>
    </draggable>
    <!-- 輸出list數據 -->
    {{list}}
  </div>
</template>
<script>
// 引入拖拽組件
import draggable from 'vuedraggable'
export default {
  name: 'demo',
  components: {
    //調用組件
    draggable,
  },
  data () {
    return {
      list:[
        {
          id: 1,
          name: 'a'
        },
        {
          id: 2,
          name: 'b'
        },
        {
          id: 3,
          name: 'c'
        },
        {
          id: 4,
          name: 'd'
        },
        {
          id: 5,
          name: 'e'
        },
        {
          id: 6,
          name: 'f'
        },
      ]
    }
</script>

屬性

value

Array，非必須，默認爲null

用於實現拖拽的list，通常和內部v-for循環的數組爲同一數組。 最好使用vuex來實現傳入。 不是直接使用，而是通過v-model引入。

<draggable v-model="myArray">

list

Array，非必須，默認爲null

就是value的替代品。 和v-model不能共用 從表現上沒有看出不同

element

String，默認div

就是<draggable>標籤在渲染後展現出來的標籤類型 也是包含拖動列表和插槽的外部標籤 可以用來兼容UI組件

options

Object

配置項

• group: string or array 分組用的，同一組的不同list可以相互拖動
• sort: boolean 定義是否可以拖拽
• delay:number 定義鼠標選中列表單元可以開始拖動的延遲時間
• touchStartThreshold:number (不清楚)
• disabled: boolean 定義是否此sortable對象是否可用，爲true時sortable對象不能拖放排序等功能
• store:
• animation: umber 單位:ms 動畫時間
• handle: selector 格式爲簡單css選擇器的字符串，使列表單元中符合選擇器的元素成爲拖動的手柄，只有按住拖動手柄才能使列表單元進行拖動
• filter: selector 格式爲簡單css選擇器的字符串，定義哪些列表單元不能進行拖放，可設置爲多個選擇器，中間用“，”分隔
• preventOnFilter: 當拖動filter時是否觸發event.preventDefault()默認觸發
• draggable: selector 格式爲簡單css選擇器的字符串，定義哪些列表單元可以進行拖放
• ghostClass: selector 格式爲簡單css選擇器的字符串，當拖動列表單元時會生成一個副本作爲影子單元來模擬被拖動單元排序的情況，此配置項就是來給這個影子單元添加一個class，我們可以通過這種方式來給影子元素進行編輯樣式
• chosenClass: selector 格式爲簡單css選擇器的字符串，目標被選中時添加
• dragClass:selector 格式爲簡單css選擇器的字符串，目標拖動過程中添加
• forceFallback: boolean 如果設置爲true時，將不使用原生的html5的拖放，可以修改一些拖放中元素的樣式等
• fallbackClass： string 當forceFallback設置爲true時，拖放過程中鼠標附着單元的樣式
• dataIdAttr： data-id
• scroll：boolean當排序的容器是個可滾動的區域，拖放可以引起區域滾動
• scrollFn：function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { … } 用於自定義滾動條的適配
• scrollSensitivity: number 就是鼠標靠近邊緣多遠開始滾動默認30
• scrollSpeed: number 滾動速度

函數配置

• setData: 設置值時的回調函數
• onChoose: 選擇單元時的回調函數
• onStart: 開始拖動時的回調函數
• onEnd: 拖動結束時的回調函數
• onAdd: 添加單元時的回調函數
• onUpdate: 排序發生變化時的回調函數
• onRemove: 單元被移動到另一個列表時的回調函數
• onFilter: 嘗試選擇一個被filter過濾的單元的回調函數
• onMove: 移動單元時的回調函數
• onClone: clone時的回調函數
• 以上函數對象的屬性：
  • to: 移動到的列表的容器
  • from：來源列表容器
  • item: 被移動的單元
  • clone: 副本的單元
  • oldIndex：移動前的序號

clone

function,默認值: 無處理

• 這一項要配合着options的group項的pull項處理，當pull:'clone時的拖拽的回調函數’
• 就是克隆的意思。
• 可以理解爲正常的拖拽變成了複製
• 當爲true時克隆

move

function,默認值:null

• 就是拖拽項時調用的函數
• 用來確定拖拽是否生效
• 返回null時可以生效
• 可以通過函數判斷
• 有一個參數:evt
  • evt爲object
  • draggedContext: 被拖拽元素的上下文
    • index:拖拽元素的指針
    • element: 拖拽數據本身
    • futureIndex: 拖動後的index
  • relatedContext: 拖入區域的上下文
    • index: 目標元素的index
    • element:目標數據本身
    • list: 拖入的列表
    • component:目標組件

<draggable element="ul" v-model="list" :move='allow'>
...
methods: {
  allow(evt) {
    console.log(evt.draggedContext.index)
    console.log(evt.draggedContext.element)
    console.log(evt.draggedContext.futureIndex)
    console.log(evt.relatedContext.index)
    console.log(evt.relatedContext.element)
    console.log(evt.relatedContext.list)
    console.log(evt.relatedContext.component)
    return (evt.draggedContext.element.name!== 'b')
  }
}

componentData

Object,默認值:null

• 用來結合UI組件的，可以理解爲代理了UI組件的定製信息
• 包含兩項:props和on
  • props用來代理UI組件需要綁定的屬性（:）
  • on用來代理UI組件需要綁定的事件（@）

<draggable element="el-collapse" :list="list" :component-data="getComponentData()">
  <el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name">
    <div>{{e.description}}</div>
   </el-collapse-item>
</draggable>

methods: {
  handleChange() {
    console.log('changed');
  },
  inputChanged(value) {
    this.activeNames = value;
  },
  getComponentData() {
    return {
      on: {
        change: this.handleChange,
        input: this.inputChanged
      },
      props: {
        value: this.activeNames
      }
    };
  }
}

事件

有以下幾種

start, add, remove, update, end, choose, sort, filter, clone

參數帶有如下屬性：

• add: 包含被添加到列表的元素
  • newIndex: 添加後的新索引
  • element: 被添加的元素
• removed: 從列表中移除的元素
  • oldIndex: 移除前的索引
  • element: 被移除的元素
• moved：內部移動的
  • newIndex: 改變後的索引
  • oldIndex: 改變前的索引
  • element: 被移動的元素

插槽

提供一個footer插槽，在排序列表之下。 永遠位於最下方。

<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>