beforeItemCatch

Description

Fires before an item is caught

info

The event works only in the org chart and mindmap modes of Diagram, the itemsDraggable property must be set to true.

Usage

"beforeItemCatch": ({
    id: string | number,
    targetId: string | number,
    batch: (string | number)[],
    event: PointerEvent
}) => boolean | void;

Parameters

The callback of the event is called with an object with the following parameters:

• id - the id of the moved item
• targetId - the id of the target item
• batch - an array of moved elements' ids
• event - an event object

Returns

The callback returns false to prevent the item from being caught; otherwise, true

info

For handling the inner Diagram Editor events you can use the on() method.

Example

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

// attaching a handler to the event
editor.events.on("beforeItemCatch", ({ id, targetId }) => {
  if (targetId === "2.1"){
    console.log(`
      Item ${id} won't be be caught by the item "2.1"
    `);
    return false;
  }
  else{
    console.log(`
      Item ${id} will be caught by the item ${targetId}
    `);
    return true;
  }
});

Change log:

• The batch parameter was added in the v6.0
• The callback function takes an object as a parameter since v6.0