jsPlumb multiple containment are not working together. is this bug?

Question

I have following HTML

<div id="leftpanel">
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</div>

I am adding draggable through JS dynamically. And using following JS code to make them draggable.

jsPlumb.draggable($("#top .draggable"),{containment:"#top"});
jsPlumb.draggable($("#middle .draggable"),{containment:"#middle"});
jsPlumb.draggable($("#bottom .draggable"),{containment:"#bottom"});

It shows me draggble in right containers. But when I star dragging, it suddenly moves selected draggable into top container. And when I drag it outside of top container it don't let me.

I have tried setting position of draggable to : relative,absolute. But it dint solve the problem .

Edit: if I use

$("#divId").draggable({containment:container});

it works fine. But connections don't get dragged along with dvs. If I do following

jsPlumb.draggable($("#divId"),{containment:container});

then connections move along with divs but above mentioned problems occurrs ie div automatically moves to top conteiner.

Answer 1

in your jsfiddle you're not using jquery.jsPlumb-xxx-min.js