一個全新的Vue拖拽特性實現：“調整尺寸”部分

關於拖拽

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

關於移動的開發，請參見：拖拽：移動

演示

開發步驟

下面以模塊test-party為例，說明拖拽（調整尺寸）的開發步驟

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

1. v-eb-dragdrop

通過directive v-eb-dragdrop向需要實現調整尺寸的DOM元素附加拖拽特性

更多情況下，我們並不是拖拽DOM元素本身，而是拖拽與DOM元素相對應的手柄元素

    <div class="test-dragdrop-resize-element" :style="{width:width+'px',height:height+'px'}">
      <span class="resize-handler-col" v-eb-dragdrop="getDragdropContext('col')"></span>
      <span class="resize-handler-row" v-eb-dragdrop="getDragdropContext('row')"></span>
    </div>

    getDragdropContext(resizeDirection) {
      return {
        scene: this.dragdropScene,
        resizable: true,
        resizeDirection,
        onDragStart: this.onDragStart,
        onDragMove: this.onDragMove,
        onDragEnd: this.onDragEnd,
      };
    },

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

名稱	說明
scene	應用場景，用於隔離不同的拖拽元素組，通常我們使用便捷方法Vue.prototype.$meta.util.nextId('dragdrop')創建一個唯一值
resizable	標明此拖拽是用於調整尺寸
resizeDirection	拖拽方向，col/row
onDragStart	當啟動拖拽時激發
onDragMove	當拖動時激發
onDragEnd	當拖拽行為結束時激發

拖拽事件

1. onDragStart

當啟動拖拽時激發。我們可以通過此事件返回一個tooltip信息，進行友好的提示

    onDragStart({ $el, context }) {
      const isRow = context.resizeDirection === 'row';
      const size = this.$view.sizeExtent;
      const tooltip = isRow ? this.height : this.width;
      return { size, tooltip };
    },

• 參數

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

• 返回值

名稱	說明
size	當前拖拽元素所屬容器的尺寸，當拖動時便於准確計算偏移量的百分比。如果不關心移動的百分比信息，size可以返回null
tooltip	拖拽元素的提示信息

2. onDragMove

當拖動時激發

    onDragMove({ $el, context, diff }) {
      const isRow = context.resizeDirection === 'row';
      if (!isRow) {
        let diffAbs = parseInt(diff.abs.x);
        if (diffAbs === 0) return;
        this.width += diffAbs;
        const tooltip = this.width;
        return { eaten: true, tooltip };
      } else {
        let diffAbs = parseInt(diff.abs.y);
        if (diffAbs === 0) return;
        this.height += diffAbs;
        const tooltip = this.height;
        return { eaten: true, tooltip };
      }
    },

• 參數

名稱	說明
$el	拖拽手柄元素
context	拖拽Context對象
diff	拖動時的偏移量
diff.abs	偏移量的絕對值表示
diff.percent	偏移量的百分比表示

關於diff.percent:

1. 在Grid布局中，往往通過百分比來布局DOM元素。如果給這些DOM元素啟用拖放特性來調整尺寸，那么調整的尺寸也將是百分比。可以參考儀表盤中部件的拖放實現
2. 如果要得到准確的diff.percent信息，必須在事件onDragStart中返回Grid布局容器的size信息

• 返回值

名稱	說明
eaten	如果當前傳入的diff偏移量有效，就設置eaten:true，從而重新計算新的diff偏移量
tooltip	拖拽元素的提示信息

關於eaten:

• 在Grid布局中，往往通過百分比來布局DOM元素。而這些百分比不是連續值。因此，需要拖動一定的像素才認為是一個有效的百分比變更。這時，我們就需要返回eaten:false，告知系統當前的偏移量需要累積，直到一個認可的偏移量出現，然后再返回eaten:true

3. onDragEnd

當拖拽行為結束時激發。如果需要執行清理工作，可以響應此事件

    onDragEnd({ $el, context }) {
      // do nothing
    },

• 參數

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