javascript - 可移动的 jquery 框不应移出页面

Question

我正在创建一个 Web 应用程序，我需要在其中进行一些设计调整。这是示例功能代码:http://jsfiddle.net/rkumarnirmal/FSDPH/

那里显示的黑色可移动框不应该移出页面(一点也不能)，但是如果你检查那里，你可以移动框并将它稍微移出页面。我该如何控制它？

还有一件事，我要实现 jPicker 工具 http://www.digitalmagicpro.com/jPicker/在那个盒子里。如果我们点击颜色框，jPicker 工具将弹出，然后如果框被移动，jPicker 工具必须根据页面自行排列。

我知道问这样的问题不公平，但我没有机会 :( 谁能指导我？

谢谢!

Answer 1

您可以使用 containment draggable 上的属性，以将可拖动元素保留在其父元素之一中。

例如:

$("#box_bg").draggable({scroll: false, cancel: "div#box", containment: 'document'});