JQuery UI ordinabile in un contenitore scorrevole - posizione di scorrimento "salti" durante l'ordinamento

Question

Si prega di controllare questa domanda quasi identica prima: jQuery Sortable List - scroll bar jumps up when sorting

Ho esattamente lo stesso problema, solo che ho provato tutte le soluzioni proposte non senza fortuna

Ecco il modo per riprodurre

• creare un sortable list
• hanno è scorrevole
• scorrimento verso il basso
• elementi di riordino
posizione
• scroll "salta" fino

Ecco il codice (vedi anche in JSFiddle)

Html

<ul id="panel" class="scroll"> 
    <li class="content" style="background-color:red">item1</li> 
    <li class="content" style="background-color:green">item2</li> 
    <li class="content" style="background-color:blue">item3</li> 
    <li class="content" style="background-color:gray">item4</li> 
    <li class="content" style="background-color:yellow">item5</li>  
</ul>​ 

JavaScript

$(function() { 
    $("#panel").sortable({ 
     items: ".content", 
     forcePlaceholderSize: true 
    }).disableSelection(); 
    $(".content").disableSelection(); 

});​ 

CSS

.scroll{ 
    overflow: scroll; 
    border:1px solid red; 
    height: 200px; 
    width: 150px; 
} 
.content{ 
    height: 50px; 
    width: 100%; 
} 
​ 

Ecco il codice (in JSFiddle) dopo aver provato la nozione di accepted answer (senza fortuna)

posso cercare di capire perché succede (la lista viene "accorciata" per un secondo veloce), ma tutti i tentativi di usare segnaposti o aiutanti per evitarlo non funzionavano r. Mi sento Ho provato quasi ogni permutazione delle opzioni "scorrevoli" senza fortuna

Browser ho provato

IE9, Firefox 10.0.1, e Chrome 17

versioni JQuery

core 1.7.1, UI v 1.8.17

Sto facendo qualcosa di sbagliato? C'è una soluzione? Potrebbe essere un bug?

Answer 1

Se modifiy il CSS per l'elemento .scroll aggiungendo:

position:relative; 

Questo dovrebbe risolvere il problema.

Answer 2

L'aggiunta di overflow-y:scroll alla lista ordinabile anche senza la proprietà height è stata risolta per me. Mostra solo una barra di scorrimento disabilitata, ma va bene.

Answer 3

Sembra jQuery UI 1.9.2 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 4

Ciò è causato dalla altezza del contenitore cambia durante l'ordinamento (poco prima che si crea il segnaposto)

Il problema è ben descritta ed hanno risposto in questo stack overflow: https://stackoverflow.com/a/32477389/2604980

Answer 5

아래 로 스크롤 할 때 는 이런 식 으로 하면 됩니다.

var cY = -1; 
var base = 0; 
$("").sortable({ 
    sort: function(event, ui) { 
    var nextCY = event.pageY; 
    if(cY - nextCY < -10){ 
     if(event.clientY + ui.helper.outerHeight(true) - 20 > document.body.clientHeight) { 
     base = base === 0 ? event.clientY : base; 
     var move = event.clientY - base; 
     var curScrollY = $(document).scrollTop(); 
     $(document).scrollTop(curScrollY + move+3); 
     base = event.clientY; 
     } 
    } 
    }, 
    // ..... 
});