javascript - jquery 可拖动和可调整大小的容器

Question

我正在尝试使用 jquery 使 div 既可调整大小又可拖动。然而，实现似乎是相当错误的。

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

我尝试使用几种position配置，还尝试了refreshPositions 选项，但没有任何效果。

我遇到的错误：

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

我已经最小化了这个例子。
这在所有浏览器中都是可重现的，尽管小提琴似乎在 IE 10 和歌剧中中断。

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

有关完整但简单的示例，请参见此处。

http://jsfiddle.net/jxY8M/

我该如何解决这个收容问题？

score 9 · Accepted Answer

这是 UI 可拖动本身的问题，该问题已在此处报告

您的情况下的修复是（至少在我正在研究的最新版本的 Chrome 中）

padding向父级添加 5px ， demo 在这里找到
border向父级添加 5px ， demo 在这里找到
margin给孩子添加一个 5px ， demo 在这里找到
混合以上任何一种增加 5px
添加overflow:hidden到父级，demo 在这里找到。我不知道为什么这个工作，但它似乎完美地完成了这项工作

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

score 0 · Accepted Answer

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

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

样本：

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

score 0 · Accepted Answer

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

添加position:relative到父/容器。

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

javascript - jquery 可拖动和可调整大小的容器

3 回答 3

Related

Reference