Question

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

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

这可以正常工作：对话框不会离开屏幕。该对话框是自定义的，而不是任何jQueryUI对话框。

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

$('#' + 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>

Answer 1

除了您在评论中指定的CSS，如果您向height添加width和#content，那么您实际上可以看到element内的js使用相同的#CMS_content #content { height:200px; width:200px; background:yellow; }拖动容器。

foo->bar()

<强> DEMO

jquery draggable containment无法正常工作

1 个答案: