jQuery UI Drag & Drop

Question

I tried using the solution posted here: http://stackoverflow.com/questions/811037/jquery-draggable-and-overflow-issue, but I can't seem to get it to work for myself. I have a container div (div#container) which wraps around all of my draggable divs. The div#container has its overflow set to auto. I've used the scroll option and set it to false, but it still scrolls. Any ideas?

My HTML:

<div id="container">
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
</div>

My CSS:

div#container {
    width: 300px;
    height: 300px;
    overflow: auto;
}

div.draggable {
    padding: 3px;
    font-size: 1.4em;
}

My Javascript:

$(function(){
    $(".draggable").draggable({ 
        scroll: false 
    });
});

Answer 1

This may not be exactly the answer you were looking for, but I think perhaps it's something worth looking at for your situation.

The Fluid Infusion framework includes a Layout Reorderer that does what you're trying to do. You can see a great demo of it -- including all the source -- here: http://fluidproject.org/releases/1.1.2/demos/reorderer/layoutReorderer/demo.html

Infusion is built using jQuery, and can be added to your page in a clean, simple way.

Answer 2

Perhaps, in your css, "overflow:auto" should be set on the container, i.e.:

div#container {
    width: 300px;
    height: 300px;
    overflow: auto;
}

div.draggable {

}