Making Divs Draggable But Contained Using jsPlumb With YUI

问题

I'm trying to use jsPlumb with the YUI framework to make some divs draggable and connected. However, I find when I try to make the divs draggable but contained within their parent, using:

jsPlumb.draggable("window2", {
    containment:"parent"
});

the div is still draggable outside the bounds of its parent. If I set the parent's css to "overflow: hidden" I won't see the div when it's dragged beyond the parent's bounds but I'll still see the connector to the div, which looks really awkward. To see this all in a fiddle: http://jsfiddle.net/xXYwX/3/ Does anyone know if there is a way to use jsPlumb's draggable function with YUI and still restrict the movement of the draggable div?

Thanks!

回答1:

First make the div draggable using jsPlumb:

jsPlumb.draggable("window2");

Then add necessary jsPlumb end points:

jsPlumb.addEndpoint("window2", { ----});

Then add the HTML draggable like

$('#window2').draggable({
    containment: 'parent'
});

Its working for me..

回答2:

No, it seems not possible with the yui version of jsPlumb. The 'dd-constrain' module is missing and i found no way to plug this module in, because you can't get access to the Y.DD.Drag object.

You can send a feature request to the creator or do a pull request on github. Here is a plain yui example with a constrained drag: http://yuilibrary.com/yui/docs/dd/constrained-drag.html

回答3:

make your container overflow: visible in css

来源：https://stackoverflow.com/questions/14845722/making-divs-draggable-but-contained-using-jsplumb-with-yui