一個全新的Vue拖拽特性實現：「移動」部分

關於拖拽

CabloyJS提供了完備的拖拽特性，能夠實現移動和調整尺寸兩大類功能，這裏對移動的開發進行闡述

關於 調整尺寸的開發，請參見： 拖拽：調整尺寸

演示

開發步驟

下面以模塊test-party爲例，說明拖拽（移動）的開發步驟

完整源碼請參見文件src/module/test-party/front/src/kitchen-sink/pages/dragdrop/dragdropMove.vue，這裏只說明開發要點

1. v-eb-dragdrop

經過directive v-eb-dragdrop向須要實現移動的DOM元素附加拖拽特性

<f7-list class="test-dragdrop-move-list">
    <eb-list-item v-for="(item,index) of items" :key="item" :title="item" :badge="getBadge(item,index)" v-eb-dragdrop="getDragdropContext(item)">
    </eb-list-item>
  </f7-list>

getDragdropContext(item) {
      return {
        scene: this.dragdropScene,
        item,
        onDragElement: this.onDragElement,
        onDragStart: this.onDragStart,
        onDropElement: this.onDropElement,
        onDropLeave: this.onDropLeave,
        onDropEnter: this.onDropEnter,
        onDragDone: this.onDragDone,
        onDragEnd: this.onDragEnd,
      }
    },

咱們向v-eb-dragdrop傳入一個拖拽Context對象，具體參數以下：

名稱	說明
scene	應用場景，用於隔離不一樣的拖拽元素組，一般咱們使用便捷方法Vue.prototype.$meta.util.nextId('dragdrop')建立一個惟一值
item	與當前拖拽元素相關的自定義值
onDragElement	當初始化拖拽特性時激發
onDragStart	當啓動拖拽時激發
onDropElement	返回當前拖拽目標元素
onDropLeave	當鼠標移出拖拽目標元素時激發
onDropEnter	當鼠標移入拖拽目標元素時激發
onDragDone	當一個有效的拖拽行爲完成時激發
onDragEnd	當拖拽行爲結束時激發

2. 拖拽樣式

當鼠標移入一個有效的拖拽目標元素時，會自動給這個DOM元素添加一個data屬性data-dragdrop-drop。咱們能夠經過CSS樣式來高亮顯示當前拖拽目標元素

.test-dragdrop-move-list {
  li {
    &[data-dragdrop-drop] {
      background: rgba(128, 128, 128, 0.5);
    }
  }
}

更完整的data屬性清單以下：

名稱	說明
data-dragdrop-element	可拖拽元素
data-dragdrop-drag	當前拖拽源元素
data-dragdrop-drop	當前拖拽目標元素

拖拽事件

1. onDragElement

當初始化拖拽特性時激發，若是拖拽手柄與拖拽源元素不一樣，可經過此事件返回拖拽手柄對應的拖拽源元素

onDragElement({ $el, context }) {
      // return undefined or
      return dragElement;
    },

• 參數

名稱	說明
$el	拖拽手柄元素
context	拖拽Context對象

• 返回值

名稱	說明
undefined	若是拖拽手柄與拖拽源元素相同，能夠返回undefined，或者沒必要響應此事件
dragElement	返回與拖拽手柄對應的拖拽源元素

2. onDragStart

當啓動拖拽時激發。咱們能夠經過此事件返回一個tooltip信息，進行友好的提示

onDragStart({ $el, context, dragElement }) {
      const indexDrag = this.__getItemIndex(context.item);
      this.indexDragIndex = indexDrag;
      const tooltip = context.item;
      return { tooltip };
    },

• 參數

名稱	說明
$el	拖拽手柄元素
context	拖拽Context對象
dragElement	拖拽源元素，有可能與$el不一樣

• 返回值

名稱	說明
tooltip	拖拽源元素的提示信息

3. onDropElement

返回當前拖拽目標元素。能夠基於DOM元素之間的位置關係來判斷當前元素是否能夠做爲拖拽目標

onDropElement({ $el, context, dragElement, dragContext }) {
      const indexDrop = this.__getItemIndex(context.item);
      const indexDrag = this.__getItemIndex(dragContext.item);
      if (indexDrop === indexDrag || indexDrop == indexDrag + 1) return null;
      // dropElement
      const dropElement = $el;
      // tooltip
      const tooltip = context.item;
      // ok
      return { dropElement, tooltip };
    },

• 參數

名稱	說明
$el	拖拽目標的手柄元素
context	拖拽目標的Context對象
dragElement	拖拽源元素
dragContext	拖拽源的Context對象

• 返回值

名稱	說明
null	若是當前元素不可做爲拖拽目標，就返回null
dropElement	當前拖拽目標元素
tooltip	當前拖拽目標元素的提示信息

4. onDropLeave

當鼠標移出拖拽目標元素時激發

當鼠標移出拖拽目標元素時，系統會自動移除DOM元素中的data屬性data-dragdrop-drop。所以，通常而言，能夠經過CSS樣式來切換拖拽目標的高亮顯示。咱們仍然能夠經過此事件定製格外的行爲

onDropLeave({ $el, context, dropElement }) {
      this.indexDropIndex = -1;
    },

• 參數

名稱	說明
$el	拖拽目標的手柄元素
context	拖拽目標的Context對象
dropElement	拖拽目標元素

5. onDropEnter

當鼠標移入拖拽目標元素時激發

當鼠標移入拖拽目標元素時，系統會自動向DOM元素添加data屬性data-dragdrop-drop。所以，通常而言，能夠經過CSS樣式來切換拖拽目標的高亮顯示。咱們仍然能夠經過此事件定製格外的行爲

onDropEnter({ $el, context, dropElement }) {
      const indexDrop = this.__getItemIndex(context.item);
      this.indexDropIndex = indexDrop;
    },

• 參數

名稱	說明
$el	拖拽目標的手柄元素
context	拖拽目標的Context對象
dropElement	拖拽目標元素

6. onDragDone

當一個有效的拖拽行爲完成時激發

onDragDone({ $el, context, dragElement, dropElement, dropContext }) {
      const indexDrag = this.__getItemIndex(context.item);
      this.items.splice(indexDrag, 1);
      const indexDrop = this.__getItemIndex(dropContext.item);
      this.items.splice(indexDrop, 0, context.item);
    },

• 參數

名稱	說明
$el	拖拽源的手柄元素
context	拖拽源的Context對象
dragElement	拖拽源元素
dropElement	拖拽目標元素
dropContext	拖拽目標的Context對象

7. onDragEnd

當拖拽行爲結束時激發。若是須要執行清理工做，能夠響應此事件

onDragEnd({ $el, context, dragElement }) {
      this.indexDragIndex = -1;
    },

• 參數

名稱	說明
$el	拖拽源的手柄元素
context	拖拽源的Context對象
dragElement	拖拽源元素