一個全新的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	拖拽源元素