Skip to main content

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