containment:"parent" does not work properly

[Vaxo Basilidze]

I'm trying to make draggable items stay inside their parent. If I make these items draggable using jquery-ui, everything works perfect. See the code:

                    $('.foo').draggable({

                        containment: $(this).parent(),

                        stack: '.foo',

                        snap: '.foo'

                    });

But if I try to make them draggable using jsPlumb, like this:

                jsPlumb.draggable($('.foo'),{

                    containment:"parent",

                    snap: true

                });

Everything works fine until I add endpoints. After that containment kinda works, but only for top and bottom borders. For left and right borders it does not work properly, draggable item leaves borders of parent div, but after I release mouse and try to drag the same item again, it jumps back to where it should have stayed, in its parent div. What's the problem?

Here is the jsfiddle. Drag any item to the right and drag it around, there will be no problems. Then press "Add new link" and drag it again. You will see the problem:

https://jsfiddle.net/vaxobasilidze/cg3hkde7/3/

[Vaxo Basilidze]

I found a solution. Simply, I needed to add position: relative to my main div, that was all:

#mainDiv {

    display: inline-block;

    width: 82%;

    min-height: 100%;

    box-sizing: border-box;

    position: relative;

    overflow: hidden;

    float: left;

    margin: 0;

    padding: 3px;

}

[Simon Porritt]

yep.

https://jsplumbtoolkit.com/community/doc/dragging.html