jQuery可拖动和可调整大小的限制范围

Question

我正在尝试使用jQuery使一个div可调整大小和可拖动。然而，实现似乎相当有缺陷。 我找到了几个类似的问题，但没有解决方案。

• 在jQuery中，如何在同时使用resizable()和draggable()时修复包含错误？
• 调整JQuery可拖动元素的包含父元素大小时进行拖动

我尝试使用几种不同的position配置，并尝试了refreshPositions选项，但都没有起作用。 我遇到的问题：

• 当快速移动子项（尤其是在圆形运动时），它经常会破裂并停留在容器之外。
• 当将子项移动到右下角，然后尝试通过重复拖动将子项拖出角落时，在每次迭代中，子项都会进一步破坏限制。
• 当限制被破坏时，在下一次拖动时，您也可以拖入这个破碎的限制区域。

我已将示例最小化。
尽管Fiddle似乎在IE 10和Opera中崩溃，但这在所有浏览器中都是可重现的。

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

点击这里查看一个完整但简单的示例。

http://jsfiddle.net/jxY8M/

我该如何解决这个包含问题？

- Willem D'Haeseleer

Answer 1

这是UI可拖动本身的问题，这个问题已经在这里报告过了。

在您的情况下，解决方法是（至少在我正在使用的最新版Chrome中）：

1. 为父元素添加5px的padding，示例在此处
2. 为父元素添加5px的border，示例在此处
3. 为子元素添加5px的margin，示例在此处
4. 将上述任意组合以增加5px
5. 向父元素添加overflow:hidden，示例在此处。我不知道为什么这个方法有效，但它似乎完美地完成了任务。

5px的阈值可能只适用于此示例，在实际情况中可能需要进行一些调整以获取正确的值。我看到的其他一些示例需要更少的padding或border宽度，我想这可能与元素的大小有关，但我不确定。我在他们的示例中测试了第五种解决方案，它似乎也起作用了。

- Zach Saucier

---

overflow:hidden 对我很有用，确实非常奇怪！你在哪里找到这个解决方案的？通过 bug 追踪器吗？今天我感觉我的谷歌技能让我失望了！ - Willem D'Haeseleer

@WillemD'haeseleer 不是的，我是通过谷歌搜索找到这个页面的 (: - Zach Saucier

很重要的一点是，在子元素上设置高度和宽度。 - Juri

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>

- bballard

Answer 3

在使用resizable()和draggable()同时时，如何解决jQuery中的包含错误？已经关闭，但是解决该问题的方法是：

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

overflow:hidden对我没有用（在Firefox中；尚未测试其他浏览器）

- Titus