Main image
18th April
2011
written by Ricky Stevens

I’ve been using jQuery Sortable for quite a while over various projects, and I’ve never encountered any strange behaviour. On my current project however, I had used the jQuery UI Sortable to allow the client to re-order some elements within an HTML list. Oddly though, whenever you scrolled down the page to get to the list, and dragged an element, the offset of the dragged element went a bit mad and flew up the page!

After a little of searching and investigating, I found out what was causing this. The front-end development had been done by our Front End Developer, and handed over to myself to work on. Within his generic CSS file was the property;

  1. overflow-y:scroll;

He, quite rightly, added this in so on IE browsers, if the content length changed dynamically, the page didn’t jump when the scrollbar appeared. Removing this properly from the pages stylesheet fixed the offset bug with jQuery UI Sortable.

Not quite sure why, I intend to investigate why this is happening within the coming weeks, but for now I hope posting this will make somebody else’s life a little easier!

11 Comments

  1. N. Toidag
    26/06/2011

    I’ve been having the same bug lately – and indeed, the overflow-y caused this behaviour! Thanks for posting!

  2. Andy
    25/04/2012

    Thanks!

  3. franfran
    27/06/2012

    Thx for the clue! I was able to search more info by digging around overflow-y. Here is the discussion:

    http://forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff

    FYI, to solve if you must use overflow-y in your page:

    - make sure NONE of the ui-sortable parent items has position:relative. Just set them to position:inherit

  4. Sean
    22/07/2012

    Thanks so much… I can quit pulling my hair out now ;-)

  5. 26/07/2012

    Interestingly enough, in my case I had to *add* overflow-y: scroll; (to the element which contains the draggable items) in order to fix an offset issue! Thanks for the tip!

  6. Raj Dip
    15/09/2012

    Thanks Buddy !

    It was really helpful :)

  7. 15/10/2012

    Removing position:relative; from all parents is not an acceptable solution. This problem exists whether you have overflow-y set or not. I’m using jquery 1.8.2 and jqueryui 1.9 and this STILL exists.

  8. Jay
    19/10/2012

    Thanks! Wasted an entire afternoon before I found this post :)

  9. Lesyona
    09/11/2013

    Thanks! Was really helpfull for me, solved the problem.

  10. Ian
    12/12/2013

    Thanks Ricky!

  11. EliA
    26/01/2014

    Thanks franfran!

    Your solution worked like magic!

    I’ve wasted so much time on it until I got here…

Leave a Reply