包含选项的jQuery UI Draggable问题

时间:2013-07-31 07:11:19

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

我正在尝试在宽度相同的div范围内使图像在div的限制内可拖动。这很难解释,但图像的一侧(顶部或底部)可以离开div,但是图像的边缘和div的边界之间不能有间隙。

要恢复图像具有与父div相同的宽度,但其高度较大,因此隐藏了部分图像。

这就是我想做的事情: http://jsfiddle.net/maxwell2022/DerNa/165/

它完美地工作......因为div之上没有任何东西。如果文档和div之间存在间隙,则它不再起作用。我认为Draggable正在将文档作为图像顶部的参考。一旦开始拖动图像,图像就会移动并将其顶边粘在文档的顶部:

http://jsfiddle.net/maxwell2022/DerNa/164/

我不知道如何使用containment选项实现此目的。 欢呼声,

马克西姆

更新

另一种相对定位却没有运气的尝试:http://jsfiddle.net/maxwell2022/DerNa/166/

1 个答案:

答案 0 :(得分:0)

我找到了一个解决方案来修复它使用offset()获取父div的顶部位置并将其添加到包含边界。我不确定这是最好的解决方案,但看起来它正在发挥作用。

我在顶部的偏移量中只有1%的差异,这非常令人讨厌:如果拖动图像并使其尽可能地粘在顶部,则返回99%偏移量100%的内容(请参阅控制台中的结果)。

底部正确(0%)。我认为这是由于四舍五入,但我不确定。 这是jsfiddle:http://jsfiddle.net/maxwell2022/DerNa/167/

如果您有更好的主意,请告诉我。

谢谢,Maxime