我正在创建一个需要进行一些设计调整的 Web 应用程序。这是示例功能代码：http: //jsfiddle.net/rkumarnirmal/FSDPH/
那里显示的黑色可移动框不应该移出页面（甚至一点也不），但是如果您选中那里，您可以移动该框并将其稍微移出页面。我该如何控制它？
还有一件事，我将在那个框中实现 jPicker 工具http://www.digitalmagicpro.com/jPicker/ 。如果我们点击颜色框，jPicker 工具会弹出，然后如果框被移动，jPicker 工具必须根据页面自行排列。
我知道问这样的问题是不公平的，但我没有机会:(有人可以指导我吗？
谢谢！
您可以使用containmenton 属性draggable将可拖动元素保留在其父元素之一内。
例如：
$("#box_bg").draggable({scroll: false, cancel: "div#box", containment: 'document'});
现在不可能完成整个代码。我给你逻辑。你可以轻松做到。
您必须跟踪叠加层的拖动事件。然后在事件处理程序中，您必须检查覆盖的左侧和顶部位置。如果它超出了您的限制，则将 left/top 设置为 0（或某个偏移量）。
另一方面，如果它超出了最右边（或底部），则必须相应地设置窗口的宽度（或高度）减去覆盖层的宽度（或高度）。
拾色器也是如此。但是，当显示颜色选择器时，您必须执行重新定位，而不是拖动事件。