jQuery UI Drag & Drop

I tried using the solution posted here: 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 <开发者_如何学C;/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 
    });
});

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

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

div.draggable {

}

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.

The problem is setting the overflow:auto - its definition is to show either vertical or horizontal scrollbars when needed.

The scroll:false in the draggable does not mean "do not create scrollbars", rather if the draggable approaches the edge of the div to automatically scroll or not.

Say the user had a very small screen (400x400) and your page was huge (2,000x2,000) and they wanted to drag an element from one side to the other.

With scroll:true, as the element approached the edge of the window it would automatically scroll with the element. With scroll: false they would have to drag to 400px, drop the element, scroll manually over, pick up the element and drag again.

Another example of scroll: true is how highlighting text in a document works, as you approach the edge of the page the program slowly scrolls down and if you move your cursor to the very bottom it scrolls/highlights really fast.

Anyways, back to the code.

To illustrate change your CSS to this:

div.draggable {
    padding: 3px;
    font-size: 1.4em;
    border: 1px solid black;
}

Then drag the element around, as it approaches the side the scroll bar appears because of the div's width. If you turn on scroll:true and notice that it scrolls with you as you approach the edge.

Now you can change your #container to this css to completely hide everything outside its boundaries:

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

Hidden means to never create scroll bars, whatever is outside my width and height is completely invisible.

So if you drag around now, you notice that the div border goes outside the container and doesnt create a scroll bar. Now typically you would define a hard width for your draggable div's to prevent this sort of thing, as the overflow:hidden might be hide critical content.

Here is a fiddle.