javascript jquery 可拖动和可调整大小的容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18529854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery draggable and resizable containment
提问by Willem D'Haeseleer
I am trying to make a div both re-sizable and draggable with jquery. However the implementation seems to be pretty buggy.
我正在尝试使用 jquery 制作一个既可重新调整大小又可拖动的 div。然而，实现似乎非常有问题。
I found several similar questions, but no solution.
我发现了几个类似的问题，但没有解决方案。
- In jQuery, How to fix containment bug when using resizable() and draggable() simultaneously?
- Resizing a JQuery Draggable element's containment parent while dragging
I tried using several positionconfigurations and also tried the refreshPositionsoption, nothing worked.
我尝试使用多种position配置，也尝试了refreshPositions选项，但没有任何效果。
The bugs I experience:
我遇到的错误：
- When moving the child item rapidly (specifically when moving in circles), it often breaks and stays out of containment.
- When moving the child to the bottom right corner, then trying to drag the child out of the corner by dragging repeatedly, in each iteration the child breaks the containment a bit further
- When the containment is broken, on the next drag, you can also drag into this broken containment area
- 当快速移动子项时（特别是在圆周移动时），它通常会破裂并脱离收容。
- 当将孩子移动到右下角，然后尝试通过重复拖动将孩子拖出角落时，在每次迭代中，孩子会进一步打破遏制
- 当收容被破坏时，在下一次拖动时，您也可以拖动到这个破损的收容区域
I have minimized the example.
This is reproducible in all browsers, all though the fiddle seems to break in IE 10 and opera.
我已经最小化了这个例子。
这在所有浏览器中都可以重现，尽管小提琴似乎在 IE 10 和歌剧中坏了。
$(".child")
.draggable({
containment: "parent",
cursor: "move"
}).resizable({
handles: "s,e",
containment: "parent",
minHeight: 50,
minWidth: 50
});
See here for a full but simple example.
有关完整但简单的示例，请参见此处。
How could I fix this containment issue?
我该如何解决这个收容问题？
回答by Zach Saucier
This is a problem with the UI draggable itself, the issue has already been reported here
The fixes in your case are (at least in the latest version of Chrome which I'm working on) to
您的情况的修复是（至少在我正在开发的最新版本的 Chrome 中）
- Add a 5px
paddingto the parent, demo found here - Add a 5px
borderto the parent, demo found here - Add a 5px
marginto the child, demo found here - Mixing any of the above for a 5px increase
- Add
overflow:hiddento the parent, demo found here. I have no idea why this one works, but it seems to do the job perfectly
- 添加一个 5px
padding到父级，演示在这里找到 - 添加一个 5px
border到父级，演示在这里找到 margin给孩子添加一个 5px ，演示在这里找到- 混合上述任何一项以增加 5px
- 添加
overflow:hidden到父级，在此处找到演示。我不知道为什么这个工作，但它似乎完美地完成了这项工作
The 5px threshold could be only pertinent to the example, some playing might be necessary in order to get the correct value in your actual case. Some other examples I saw needed less padding or border width, I suppose it's based on how large the elements are somehow, but I'm not sure. I did test the fifth solution in their examples and it seemed to work there as well
5px 阈值可能仅与示例相关，为了在您的实际情况下获得正确的值，可能需要进行一些播放。我看到的其他一些示例需要更少的填充或边框宽度，我想这是基于元素的大小，但我不确定。我确实在他们的例子中测试了第五个解决方案，它似乎也在那里工作
回答by bballard
You may try to use the stop function on the draggable interaction to change the resizable parameters. It helped me when I had similar problems when setting the containment on both resizable and draggable interactions.
您可以尝试在可拖动交互上使用停止功能来更改可调整大小的参数。当我在可调整大小和可拖动交互上设置包含时遇到类似问题时，它对我有所帮助。
Note: this works with a locked aspect ratio on the resizable interaction as well.
注意：这也适用于可调整大小的交互的锁定纵横比。
Sample:
样本：
<div id="container" style="width: 320px; height: 240px; background-color: #000000;">
<div id="subject" style="width: 240px; height: 180px; background-color: #ffffff;">
</div>
</div>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
jQuery("#subject").resizable(
{
aspectRatio: 4 / 3,
minHeight: 120,
minWidth: 160,
maxHeight: 240,
maxWidth: 320
}).draggable(
{
containment: "#container",
stop: function(evt, ui) {
var container = jQuery("#container");
var subject = jQuery("#subject");
var containerPosition = container.position();
var subjectPosition = subject.position();
var relativeLeft = subjectPosition.left - containerPosition.left;
var relativeTop = subjectPosition.top - containerPosition.top;
var maxWidth = (container.width() - relativeLeft) | 0;
var maxHeight = (container.height() - relativeTop) | 0;
subject.resizable("option", "maxWidth", maxWidth);
subject.resizable("option", "maxHeight", maxHeight);
}
});
});
</script>
回答by Titus
In jQuery, How to fix containment bug when using resizable() and draggable() simultaneously?is closed, but the solution to that problem is:
在 jQuery 中，如何在同时使用 resizable() 和 draggable() 时修复包含错误？已关闭，但该问题的解决方案是：
add position:relativeto the parent/container.
添加position:relative到父/容器。
overflow:hiddendid not work for me (in Firefox; have not tested other browsers yet)
overflow:hidden对我不起作用（在 Firefox 中；尚未测试其他浏览器）
