jQuery drag and drop not working properly when page is longer than window

Question

I have implemented jQuery drag and drop in my app, and it works everywhere except in IE, and it works there too if the page is smaller than the window (no scroll bars). If the page is too long and the draggables are near the bottom, then each drag causes the page to jump back to the top, followed by wild flickering of the content as the item is moved. Has anyone seen this before? The code to start the sortable is pretty much a one-liner:

jQuery('#childrenlist').sortable({items:'div', update:updateChildrenOrder});

UPDATE: I can eliminate the jerky flickering by setting scroll:false and setting the height of the container, like this:

jQuery('#childrenlist').sortable({
    items:'.sortrow', 
    scroll: false,
    update:updateChildrenOrder,
    create:function(){
        jQuery(this).height(jQuery(this).height());
    }
});

The sorting still doesn't work though, because when I begin to drag any element, the dragged element only appears at the very top of the page (off screen).

Could you provide a http://jsfiddle.net which shows the behaviour? — Rory McCrossan, Jan 03 '13 at 18:39
You can see it here (scroll down to the "Children" section): http://lythgoes.net/genealogy/dev/dragdrop.htm — user1512959, Jan 03 '13 at 18:51

score 1 · Answer 1 · edited May 23 '17 at 12:15

I spent more than a day on an issue with the same symptoms. It was in IE only. The more standard compliant browsers did not have these bugs:

Shaky dragging of a dialog.
jQuery UI Dialog position on open not centered or remembered between openings.
jQuery UI Dialog resize caused child DIVs to shrink unexpectedly.

For me, It came down to a missing DOCTYPE declaration. I hope this helps someone else. I have not tested all DOCTYPEs. My solution was proven with XHTML 1.0 Strict.

Researching similar issues, I find information about a faulty calculation of the window offset, which makes sense to me. If the DOCTYPE had not helped, I would have pursued that angle.

score 0 · Answer 2 · edited Apr 01 '13 at 17:04

Yes one of the reasons could be a missing or incorrect DOCTYPE declaration. Also, absolutely nothing (not even comments) should come before the DOCTYPE declaration in IE if you want IE to work in standards mode and not quirks mode. Quirks mode renders CSS incorrectly and also makes its own modifications to the CSS box model which could be the root cause of jQuery drag and drop problems because of incorrect position calculations. Do this:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>Insert title here</title>
</head>
<body>
Content here
</body>
</html>

jQuery drag and drop not working properly when page is longer than window

2 Answers2