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

您可以找到完整的代码这里。

在Firefox中，粉红色背景容器中的可拖动框可以正常工作，但当我打开Chrome时，它只会上下拖动，并且似乎是以盒子的宽度作为容器的宽度。我在这里做错什么了吗？我很感谢你的帮助。

谢谢。

Answer 1

试试这个解决方案：

<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
    });
});

演示

Answer 2

我对代码进行了如下修改，并在chrome中工作：

$(function(){

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

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

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

});

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