Jquery UI .draggable and Chrome

Question

I was playing with JqueryUI and I encountered this issue when opening the page in chrome.

Here is the HTML for the page

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

You can find the Complete code here

In Firefox the draggable box in the pink background container is working all fine but when I am opening in Chrome, it is dragging only upside down and it seems it is taking width of the box as the width of the container.. Am I doing anything wrong here ? I appreciate any help.

Thanks.

Answer 1

I have modified the code as below and it worked in chrome :

$(function(){

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

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

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

});

Why exactly do you want to add containment:".dragcontainer" ?

Answer 2

Try this solution:

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