...">
Clever Geek Handbook

JQuery Draggable containment issue, cannot drag elements outside of parent div

I have a very simple image manager like:

<div id="container">

    <div id="draggable-images">
        <img class="images" src="image1.jpg" />
        <img class="images" src="image2.jpg" />
        <img class="images" src="image3.jpg" />
    </div>

    <div id="droppable-area>
    </div>

</div>

And jQuery to go with it:

        $( ".images" ).draggable({ containment: "#container" });
        $( "#droppable-area" ).droppable();

And this is the CSS:

#draggable-images {
    overflow:scroll;
    overflow-x:hidden;
}

.images {
    z-index:10000;
}

The images are dragged, but they won't go out of their parent div no matter what the wrapper is set to (even tried to set it to the window).

Does anyone know how to get it to work, or why it doesn't work?

I set z-index high to make sure this is not a problem. I also tried making the #draggable-images

div without scrollbar, that didn't work either.

It seems to work like a jQuery site , can't figure out what I'm missing.

+3


source to share


3 answers 


$('images').draggable({ appendTo: 'body' });


+9


source


Remove overflow-x:hidden

from #draggable-images

. I faced similar issue too.



+1


source


  • check your html, there is something wrong with it.
  • remove the overflow styles of the parent
  • Z-index? necessary?

http://jsfiddle.net/LRj9T/1/

0


source






More articles:


All Articles