jQuery UI sortable() - listitem salta in alto in Safari e Chrome

Question

Ho una lista ordinata non ordinata nella parte inferiore della mia pagina, che funziona perfettamente in Firefox. Tuttavia, in Safari/Chrome il listener grabbed salta immediatamente in cima alla pagina quando voglio trascinarlo, come l'UL è in cima alla finestra. Qualcuno sa cosa sta succedendo qui?

Grazie. Lex.

Ecco il codice:

HTML (e 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

Ecco la correzione ho trovato da qualche parte online ... forse anche su SO. Per me va bene.

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

Per me, il problema è venuto da troppo pieno css sul corpo:

body { overflow-x: hidden; } 

rimozione di questa linea di risolvere completamente il problema.

Answer 3

Ho avuto lo stesso identico problema con gli elementi ordinabili che salivano in cima a Chrome mentre lo stesso codice funzionava bene in Firefox. Il problema era che l'elemento contenitore non aveva altezza esplicita. Dopo aver aggiunto un'altezza, l'oggetto non è più saltato in giro.

Answer 4

Ho avuto lo stesso problema. Ha funzionato bene in Firefox, ma ha continuato a saltare in Safari e Chrome. Alla fine l'ho risolto aggiungendo overflow: auto; all'elenco non ordinato nel mio CSS.

Non ho nemmeno bisogno di specificare l'altezza dell'UL.

Answer 5

Per me questo stava accadendo perché c'era una transizione/animazione impostata sulla posizione della riga. La rimozione della transizione ha risolto il problema.

Answer 6

Sembra che jQuery UI 1.9.2 abbia risolto il problema.

Se non è possibile modificare la libreria, è disponibile una soluzione che include un'operazione di scorrimento semplice. L'idea è semplice:

• Mantieni la posizione di scorrimento precedente ogni volta che scorri.
• Consente di tornare alla posizione precedente quando si avvia il trascinamento dell'elemento.

Qui vai;

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 7

Se avete l'opzione 'Ripristina' semplicemente rimuovere o impostare 'ripristinare: false' nelle opzioni ordinabili. Funziona per me. Grazie.