listas - jQuery UI sortable()-listitem salta al principio en Safari y Chrome

ui jquery draggable

Question

Tengo una lista ordenada desordenada en la parte inferior de mi página, que funciona perfectamente en Firefox. Sin embargo, en Safari / Chrome, el elemento de lista capturado salta instantáneamente a la parte superior de la página cuando quiero arrastrarlo, como si el UL estuviera en la parte superior de la ventana. ¿Alguien sabe lo que está pasando aquí?

Gracias. Lex

Aquí está el código:

HTML (y PHP):

<ul id="list">
<?
foreach($downloads as $download)
{
echo "<li class=''downloads''><a rel=''".$download->id."'' href=''".$base_url."downloads/".$download->id."''>".$download->title."</a></li>";
}
?>
</ul>

CSS:

ul#list {
padding: 10px 0;
display: block;
}
ul#list li {
background: #fff;
padding: 10px;
color: #bc1e2c;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
font-weight: bold;
margin: 10px 0;
display: block;
}
ul#list li:hover {
background: #212121;
color: #fff;
cursor: move;
}

JS:

$(".alter-content ul#list").sortable({
update : saveSortorder,
containment: ''parent''
});

Answer 1

Aquí está la solución que encontré en algún lugar en línea ... tal vez incluso en SO. Funciona para mi.

elements.itemList.sortable({
''start'': function (event, ui) {
//jQuery Ui-Sortable Overlay Offset Fix
if ($.browser.webkit) {
wscrolltop = $(window).scrollTop();
}
},
''sort'': function (event, ui) {
//jQuery Ui-Sortable Overlay Offset Fix
if ($.browser.webkit) {
ui.helper.css({ ''top'': ui.position.top + wscrolltop + ''px'' });
}
}
});

Answer 2

Para mí esto estaba sucediendo porque había una transición / animación en la posición de la fila. Eliminar la transición solucionó el problema.

Answer 3

Para mí, el problema vino del desbordamiento de css en el cuerpo:

body { overflow-x: hidden; }

Eliminando esta línea arreglamos completamente el problema.

Answer 4

Parece que jQuery UI 1.9.2 solucionó el problema.

Si no puede cambiar la biblioteca, hay una solución que incluye una simple barra de desplazamiento. La idea es simple:

• Mantenga la posición de desplazamiento anterior cada vez que se desplaza.
• Ajuste el desplazamiento hacia atrás a la posición anterior cuando comience a arrastrar su elemento.

Aqui tienes;

var lastScrollPosition = 0; //variables defined in upper scope
var tempScrollPosition = 0;
window.onscroll = function () { // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
clearTimeout($.data(this, ''scrollTimer''));
$.data(this, ''scrollTimer'', setTimeout(function () {
tempScrollPosition = lastScrollPosition; // Scrolls don''t change from position a to b. They cover some numbers between a and b during the change to create a smooth sliding visual. That''s why we pick the previous scroll position with a timer of 250ms.
}, 250));
lastScrollPosition = $(document).scrollTop(); // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
};
$("#YourSortablePanel").sortable({
start: function (event, ui) {
$(document).scrollTop(tempScrollPosition);
}
});

Answer 5

Si tiene la opción ''revertir'' simplemente elimínela o establezca ''revertir: falso'' en las opciones clasificables. Esto funciona para mi. Gracias.

Answer 6

Tuve exactamente el mismo problema con los elementos que se pueden ordenar saltando a la parte superior en Chrome, mientras que el mismo código funcionó bien en Firefox. El problema era que el elemento contenedor no tenía una altura explícita. Una vez que le agregué una altura, el objeto ya no saltaba.

Answer 7

Yo tuve el mismo problema. Funcionó bien en Firefox pero siguió saltando en Safari y Chrome. Finalmente lo arreglé agregando overflow: auto; a la lista sin clasificar en mi CSS.

Ni siquiera tuve que especificar la altura de la UL.