Draggable elements goes out from the container if we move those towards top or left.

[Mushfik]

I am creating a project like workflow, in which i need to give functionality to user to add as many nodes he wants to add. I instantiated a jsPlumb instance using container (scrollable div) in which all the draggable nodes will be defined. Everything is working great except when i am dragging a node towards top or left in that container (scrollable div), it goes out of it and after releasing it i cannot take it back to the container. While it is working fine when nodes dragged towards right or bottom, scroll appears and node can be moved in scrolled container.
I have seen this problem in a demo, please refer below-
http://jsplumbtoolkit.com/demo/flowchart/jquery.html

I tried jsPlumb.draggable(el, { containment:"parent"}), after setting this param, scroll of container doesn't work properly. scroll doesn't appear if i drag the node towards right or bottom.

[sporritt]

this is a function of jquery draggable. i can't help you with this.

[brian-davies]

This happens in the "vanilla" version as well, so it's not just jQuery. If you drag off the right or bottom, you get scroll bars and all is well; if you drag off the left or top, your node is like the frisbee on the roof.

What you'd like to be able to do is containment: [0, 0, 99999, 99999], so that you have a container that keeps you from going off the top or left, but the bottom and right containment is so loose that you practically never hit it. That looks like it works in jQuery jsPlumb, but not in DOM jsPlumb. DOM jsPlumb is using either the parent or the window size instead, I think? So if there's a bug to be found here, it's that DOM jsPlumb's implementation of containment doesn't give you correct array support. (I'm using the DOM version for the built-in multiple drag selection -- coding around containment was easier than coding multiple drag from scratch.)

My solution was:

jsPlumb.draggable (newnode, { drag: function (evt) { dragnode (evt); } });

function dragnode (evt)
{
    var node = evt.el;

    if (parseInt (node.style.top) < 0)
        node.style.top = "0px";

    if (parseInt (node.style.left) < 0)
        node.style.left = "0px";
}

Basically, I'm implementing my own top / left containment. That's a bit clunky (in particular, this doesn't refresh the endpoints and connections when you drag off the edge) but it will save you from losing nodes entirely.

I also tried a solution where I had a container, and then on drag start, I set the container height / width to very large numbers, so that as a practical matter, it was contained on top / left but not on bottom / right, but that failed with dragging multiple nodes.

[sporritt]

reopening for me to track...i will overlook this if it remains closed.

[sporritt]

tracking this now in Katavorio

jsplumb/katavorio#19

[Helen1987]

Could you explain how to use this feature properly? When I use jsPlumb.draggable(el, { containment:"parent"}), I am not able to move down and right as well(

[sporritt]

It doesn't exist yet - it's down as an enhancement request for katavorio, the drag library.

[saiprashanths]

Any updates on this? @brian-davies solution works, but as he mentions, the endpoints and connections go out of bounds.

[prateekjahead]

I applied a workaround for now:
In the draggable options, provide:

{
    getConstrainingRectangle: () => [99999, 99999],
    containment: true,
}

This will restrict top, left dragging to inside the container, while allowing bottom, right dragging to exceed the container.

[shrutis0896]

@prateekjahead your solution does the work but could you tell me how to restrict the same for bottom and right?

Thanks.

[prateekjahead]

@shrutis0896 Did you try setting getConstrainingRectangle: () => [x, y] according to the viewport of your app?
I think that would work to restrict the bottom and right directions.

[shrutis0896]

@shrutis0896 Did you try setting getConstrainingRectangle: () => [x, y] according to the viewport of your app?
I think that would work to restrict the bottom and right directions.

@prateekjahead so what does that "99999" represents in your above answer. I am not sure as to what I need to to set, will be helpful if you provide an example by providing the height and width of a container.

[sporritt]

@shrutis0896 99999 in @prateekjahead 's answer represents the width/height of the rectangle that is considered to be the bounds. Returning [99999, 99999] from getConstrainingRectangle() basically instructs jsPlumb that the size of the area in which the element can be dragged is 99999 pixels wide and 99999 pixels high. It's a workaround because it isn't certain, like 100% certain, that those dimensions are big enough, but in real world situations it seems highly likely they are.

You also need containment:true as that's the flag that instructs jsPlumb to not allow drag into negative.