javascript - jQuery UI .draggable和Chrome

我在玩JqueryUI，在chrome中打开页面时遇到此问题。

这是页面的HTML

<div class="main">
        <div class="container">
            <div class="jqui">
                <div class="contentTitle">
                    <h1>Playground</h1>
                </div>
                <div class="content">
                    <div id="draggable" class="ui-widget-content colored">1
                    </div>
                    <div id="draggable1" class="ui-widget-content colored">2
                    </div>
                    <div class="dragcontainer">
                        <div id="draggable2" class="ui-widget-content colored">3
                        </div>
                    </div>
            </div><!--jqui End-->
        </div><!--Container End-->
    </div><!--Main End-->

您可以找到完整的代码here

在Firefox中，粉红色背景容器中的可拖动框工作正常，但是当我在Chrome中打开时，它只能上下颠倒拖动，似乎将框的宽度用作容器的宽度。这里错了吗？感谢您的帮助。

谢谢。

最佳答案

试试这个解决方案：

的HTML

<div class="dragcontainer">
    <div style="position: absolute; left: 50%;">
        <div id="draggable2" style="position:relative;left: -50%;" class="ui-widget-content colored">3</div>
    </div>
</div>

jQuery查询

$(function () {
    $("#draggable").draggable();
    $("#draggable1").draggable({
        revert: true
    });
    $("#draggable2").draggable({
        containment: ".dragcontainer",
        revert: true
    });
});

DEMO