关于拖拽
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元素相对应的手柄元素
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:
- 在Grid布局中，往往通过百分比来布局DOM元素。如果给这些DOM元素启用拖放特性来调整尺寸，那么调整的尺寸也将是百分比。可以参考
仪表盘中部件的拖放实现- 如果要得到准确的
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对象 |