jquery 可拖动容器无法正常工作答案

【问题标题】：jquery draggable containment not working correctlyjquery 可拖动容器无法正常工作
【发布时间】：2015-10-06 11:26:23
【问题描述】：

我最近做了一个新功能来创建可拖动的对话框并将它们保存在 CMS 的内容 DIV 中。选择器将是：#CMS_content #content。我用它作为我的可拖动函数：

$('#' + id).draggable({
    handle: '.title',
    containment: 'window'
});

这按预期工作：对话框不会离开屏幕。对话框是定制的，不是 jQueryUI 的任何对话框。

但是，如果我使用选择器（请参见下面的代码）将其保留在内容 ID 中，则每当我拖动窗口时，它都会从顶部的屏幕中消失。所以我拖动对话框，它“消失”了，但是当我打开 firebug 时，它只是放在窗口之外。

$('#' + id).draggable({
    handle: '.title',
    containment: '#CMS_content #content' // <-- not working.
});

任何想法为什么它不起作用？我认为将其保留在内容中而不是使其可拖动到侧边菜单和顶部标题上是一个更好的主意。

这是对话框的 HTML：

<div id="draggableDialog" class="dialog onfront">
    <div class="title">
        This is a title
        <img src="images/delete_icon.png">
    </div>
    <div class="content">
        This is content
    </div>
</div>

HTML 被添加到#CMS_content #content，因此完整的 HTML 将是：

<body>
    <div id="CMS_content">
        <div id="content">
            <div id="draggableDialog" class="dialog onfront">
                <div class="title">
                    This is a title
                    <img src="images/delete_icon.png">
                </div>
                <div class="content">
                    This is content
                </div>
            </div>
        </div>
    </div>
</body>

【问题讨论】：

添加了对话框的 HTML。
请添加渲染后的html，以便我们创建demo并尽力解决..
我希望这就是你的意思。
draggableDialog 是id，忘记改了。
是的，没错。对于某些对话框，您需要一个滚动条，但效果不是很好。

标签： jquery jquery-ui

【解决方案1】：

与您在 cmets 中指定的 CSS 一起，如果您将 height 和 width 添加到您的 #content，那么您实际上可以在使用相同的 js 拖动时看到容器内的 element有。

#CMS_content #content
{
    height:200px;
    width:200px;
    background:yellow;
}

DEMO

【讨论】：

我从来没有在#content 上设置过宽度和高度，它以前也可以使用。 CMS_content 有一个高度 (765px) 和一个宽度 (100%)。
但请参阅 this demo。实现了你的CSS 加上指定的height 和width 为#content 为100%.. 所以没有它我认为很难得到height 和width 设置为element 和position:absolute
我确实使用了一些像素宽度和高度，现在我仍然可以将它拖出#content。它保留在整个文档中（与窗口包含相同）
你能更新我提供的小提琴代码并将链接还给我吗？
任何时候..快乐编码..:)