如何使用jqueryui draggable在框架内拖动图像

时间:2012-06-21 23:48:36

标签: jquery jquery-ui jquery-ui-draggable

我有以下页面:http://jsfiddle.net/DerNa/

我想要做的是约束帧内的图像(这样当你将图像移离边框时,它会阻止它)。最初我试过这个:http://jsfiddle.net/DerNa/1/

在它无法工作后,我尝试这样做:http://jsfiddle.net/DerNa/2/

但是返回false会因某种原因取消拖延。我只是希望它取消特定的拖动动作。

有人有什么想法吗?

非常感谢!

1 个答案:

答案 0 :(得分:2)

使用containment的数组坐标值:

$('img').draggable({containment:[x1,y1,x2,y2]})​;

在你的小提琴示例中,您可以使用:

$('img').draggable({containment:[-300,-300,0,0]})​;

以下是jsfiddle中的解决方案:http://jsfiddle.net/DerNa/3/

按要求添加说明:

x1, y1是您的元素可以拖动到的最小left, top x2, y2是您的元素可以拖动到

的最大left, top