关于拖拽

CabloyJS提供了完备的拖拽特性，可以实现移动和调整尺寸两大类功能，这里对调整尺寸的开发进行阐述

关于移动的开发，请参见：拖拽：移动

演示

resize-zhcn

开发步骤

下面以模块test-party为例，说明拖拽（调整尺寸）的开发步骤

完整源码请参见文件src/suite-vendor/test-party/modules/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对象