关于拖拽

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对象，具体参数如下：

拖拽事件

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 };
    },

• 参数

• 返回值

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 };
      }
    },

• 参数

关于diff.percent:

1. 在Grid布局中，往往通过百分比来布局DOM元素。如果给这些DOM元素启用拖放特性来调整尺寸，那么调整的尺寸也将是百分比。可以参考仪表盘中部件的拖放实现
2. 如果要得到准确的diff.percent信息，必须在事件onDragStart中返回Grid布局容器的size信息

• 返回值

关于eaten:

• 在Grid布局中，往往通过百分比来布局DOM元素。而这些百分比不是连续值。因此，需要拖动一定的像素才认为是一个有效的百分比变更。这时，我们就需要返回eaten:false，告知系统当前的偏移量需要累积，直到一个认可的偏移量出现，然后再返回eaten:true

3. onDragEnd

当拖拽行为结束时激发。如果需要执行清理工作，可以响应此事件

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

• 参数