关于拖拽

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对象|