Category / Section
Drag and drop symbols only on allowable regions
1 min read
Drag and drop support on allowable region
You can able to drag and drop nodes only to a desired location using diagram’s client side “dragOver” event. The argument newValue of the dragOver event returns the current position and dimension of the dragging element, with which you can able to restrict the element dropping on certain region. Similarly, you can allow the element to drop on certain element using target argument which returns underlying element at current mouse position.
The following code illustrates how to prevent dropping a node outside certain region and outside certain element.
Java-script
var allowableRegion = { x: 0, y: 0, width: 500, height: 500 }; $("#diagram").ejDiagram({ width: "100%", height: "100%", dragOver: dragOver }); function dragOver(args) { var node = args.element; var bounds = args.newValue.bounds //to restrict dropping a node outside a specific region if (bounds.x < allowableRegion.x || bounds.y < allowableRegion.y || bounds.x + bounds.width > allowableRegion.x + allowableRegion.width || bounds.y + bounds.height > allowableRegion.y + allowableRegion.height) { args.allowDrop = false; } //to restrict dropping a node outside a specific element(Ex: lane) if (!args.target || !args.target.isLane) { args.allowDrop = false; } }