jQuery arrastrar y soltar no funciona correctamente cuando la página es más larga que la ventana

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).

preguntado el 03 de enero de 13 a las 18:01

¿Podría proporcionar un jsfiddle.net which shows the behaviour? -

You can see it here (scroll down to the "Children" section): lythgoes.net/genealogy/dev/dragdrop.htm -

2 Respuestas

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:

  1. Shaky dragging of a dialog.
  2. jQuery UI Dialog position on open not centered or remembered between openings.
  3. 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 información 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.

contestado el 23 de mayo de 17 a las 13:05

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>

Respondido 01 Abr '13, 18:04

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.