jQuery UI se puede ordenar en un recipiente desplazable - posición de desplazamiento "saltos" al ordenar

Question

Selecciona esta pregunta casi idéntica en primer lugar: jQuery Sortable List - scroll bar jumps up when sorting

Tengo exactamente el mismo problema, solo que he intentado todas las soluciones sugeridas no sin suerte

Aquí está la manera de reproducir

• crear un sortable list
• tienen es desplazable
• de desplazamiento hacia abajo
• artículos de reabastecimiento
posición
• de desplazamiento "salta" a

Aquí está el código (ver también en 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%; 
} 
​ 

Aquí está el código (en JSFiddle) después de probar la idea de la accepted answer (sin suerte)

puedo tratar de entender ¿Por qué sucede (list get's "acortado" por un segundo rápido), pero todos los intentos de utilizar marcadores de posición o ayudantes para evitarlo no funcionaron eithe r. Siento que probé casi cualquier permutación de las opciones "desplazables" sin suerte

Navegadores Probé

IE9, Firefox 10.0.1, y Chrome 17

versiones JQuery

core 1.7.1, UI v 1.8.17

¿Estoy haciendo algo mal? ¿Hay una solución? ¿Podría ser un error?

Answer 1

Si actualiza tu CSS para el elemento .scroll añadiendo:

position:relative; 

Eso debería resolver este problema.

Answer 2

Agregando overflow-y:scroll a la lista sortable incluso sin la propiedad height solucionado por mí. Solo muestra una barra de desplazamiento deshabilitada, pero está bien.

Answer 3

Parece que jQuery UI 1.9.2 ha resuelto el problema.

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

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

Aquí 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 4

Esto es causado por la altura de la cambiante recipiente cuando clasificación (justo antes de que se crea el marcador de posición)

El problema está bien descrita y respuesta en este desbordamiento de pila: 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; 
     } 
    } 
    }, 
    // ..... 
});