Articles in this section
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;
    }
}

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied