跳到主要内容

afterShapeMove

描述

在形状移动一个网格步长时触发

备注

无论选中的元素数量如何,该事件仅针对目标元素触发。被拖动元素的 id 通过回调函数的 batch 参数提供。

用法

"afterShapeMove": ({
id: string | number,
batch: (string | number)[],
coords: object,
event: PointerEvent,
}) => void;

参数

该事件的回调函数使用一个包含以下参数的对象进行调用:

  • id - 形状的 id
  • batch - 已移动元素 id 组成的数组
  • coords - 一个包含移动后形状位置的 xy 坐标的对象,其中:
    • x - 形状的水平位置,从左向右移动
    • y - 形状的垂直位置,从上向下移动
  • event - 事件对象
信息

要处理 Diagram Editor 的内部事件,您可以使用 on() 方法。

示例

// initializing Diagram Editor
const editor = new dhx.DiagramEditor("editor_container");
// loading data
editor.parse(data);

// attaching a handler to the event
editor.events.on("afterShapeMove", ({ id, coords }) => {
console.log(`
Shape ${id} is at the position:
x: ${coords.x}
y: ${coords.y}
`);
});

更新日志

  • batch 参数已在 v6.0 中新增
  • 自 v6.0 起,回调函数以对象作为参数
  • idcoords 参数已在 v4.0 中新增