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

您可以在此處找到完整的代碼

在Firefox中，粉紅色背景容器中的可拖動框工作正常，但是當我在Chrome中打開時，它只能上下顛倒拖動，似乎將框的寬度用作容器的寬度。這里錯了嗎？ 感謝您的幫助。

謝謝。

Answer 1

我修改了以下代碼，並在chrome中工作：

$(function(){

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

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

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

});

您為什么要添加containment:".dragcontainer" ？

Answer 2

試試這個解決方案：

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

演示