Question

我正在尝试使用jquery创建一个可重新调整大小和可拖动的div。然而，实施似乎非常错误。

我发现了几个类似的问题，但没有解决方案。

In jQuery, How to fix containment bug when using resizable() and draggable() simultaneously?
Resizing a JQuery Draggable element's containment parent while dragging

我尝试使用多个position配置，并尝试了refreshPositions 选项，没什么用。

我遇到的错误：

当快速移动子项目时（特别是在圆圈中移动时），它经常会断开并且不会被收容。
当将孩子移动到右下角时，然后尝试通过反复拖动将孩子拖出角落，在每次迭代中孩子都会进一步打破收容
当收容被破坏时，在下一次拖动时，您也可以拖入这个破碎的收容区域

我最小化了这个例子这在所有浏览器中都是可重现的，尽管这些小提琴似乎在IE 10和Opera中都有所突破。

$(".child")
    .draggable({
    containment: "parent",
    cursor: "move"
}).resizable({
    handles: "s,e",
    containment: "parent",
    minHeight: 50,
    minWidth: 50
});

请参阅此处以获取完整而简单的示例。

http://jsfiddle.net/jxY8M/

我该如何解决此遏制问题？

Answer 1

这是UI可拖动本身的问题，问题已经报告here

您的案例中的修复程序（至少在我正在处理的Chrome的最新版本中）

向父级demo found here

padding

向父级demo found here

border

向孩子demo found here

margin

混合上述任何一项，增加5个百分点
将overflow:hidden添加到父，demo found here。我不知道为什么这个有效，但似乎完美地完成了这项工作

5px阈值可能仅与示例相关，为了在您的实际情况下获得正确的值，可能需要一些播放。我看到的其他一些例子需要更少的填充或边框宽度，我想它是基于元素有多大，但我不确定。我在他们的例子中测试了第五个解决方案，它似乎也在那里工作

Answer 2

您可以尝试在可拖动交互上使用停止功能来更改可调整大小的参数。当我在可调整大小和可拖动的交互中设置包含时遇到类似问题时，它帮助了我。

注意：这也适用于可调整大小的交互的锁定宽高比。

样品：

<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>

Answer 3

In jQuery, How to fix containment bug when using resizable() and draggable() simultaneously?已关闭，但该问题的解决方案是：

将position:relative添加到父/容器。

overflow:hidden对我不起作用（在Firefox中;尚未测试其他浏览器）

jquery可拖动和可调整大小的遏制

3 个答案: