Jquery UI .draggable 和 Chrome

Question

我在玩 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 中打开时，它只是上下颠倒拖动，并且似乎将框的宽度作为容器的宽度。我我在这里做错了什么？感谢您的帮助。

谢谢。

Answer 1

试试这个解决方案：

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

Answer 2

我已经修改了如下代码，它在 chrome 中运行：

$(function(){

    $("#draggable").draggable();

    $("#draggable1").draggable({revert:true});

    $("#draggable2").draggable({revert:true});

});

为什么要添加containment:".dragcontainer"？