Question

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

那里显示的黑色可移动框不应移出页面（甚至没有移动），但是如果你在那里检查，你可以移动框并将其放在页面之外。我该如何控制它？

还有一件事，我将在该框中实现jPicker工具http://www.digitalmagicpro.com/jPicker/。如果我们单击颜色框，将弹出jPicker工具，然后如果移动框，则jPicker工具必须根据页面自行排列。

我知道问这样的问题不公平，但我没有机会:(有人可以指导我吗？

谢谢！

Answer 1

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

例如：

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

Answer 2

现在无法完成整个代码。我给你的逻辑。你可以轻松完成。

您必须跟踪叠加层的拖动事件。然后在事件处理程序中，您必须检查叠加层的左侧和顶部位置。如果它超出了你的极限，那么将left / top设置为0（或一些偏移量）。

另一方面，如果它超出最右边（或底部），则必须相应地设置窗口的宽度（或高度）减去覆盖的宽度（或高度）。

同样适用于拾色器。但是，在显示颜色选择器时，您必须执行重新定位而不是拖动事件。