jQuery UI sortable w przewijalnej pojemniku - przewijanie pozycji „przeskakuje” przy sortowaniu

Question

Proszę zaznaczyć to niemal identyczny pierwsze pytanie: jQuery Sortable List - scroll bar jumps up when sorting

mam dokładnie ten sam problem, tylko że próbowałem wszystkie sugerowane rozwiązania nie bez powodzenia

Oto sposób do odtworzenia

• stworzyć sortable list
• mieć to przewijane
• przewijania w dół
• przedmiotów zmienić kolejność
pozycji
• przewijania "przeskakuje" w górę

Oto kod (patrz także w 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%; 
} 
​ 

Oto kod (w JSFiddle) po wypróbowaniu pojęcie accepted answer (bez powodzenia)

mogę starać się zrozumieć dlaczego tak się dzieje (lista dostaje "skrócona" na szybką sekundę), ale wszystkie próby użycia symboli zastępczych lub pomocników w celu jej uniknięcia nie zadziałały r. Czuję Próbowałem prawie każdej permutacji z "przewijalnych" Opcje bez powodzenia

Przeglądarki próbowałem

IE9, Firefox 10.0.1 i Chrome 17

wersje JQuery

rdzeń 1.7.1, UI v 1.8.17

Czy robię coś nie tak? Czy istnieje rozwiązanie? Czy to może być błąd?

Answer 1

Jeśli modifiy CSS dla elementu .scroll dodając:

position:relative; 

To powinno rozwiązać ten problem.

Answer 2

Dodanie overflow-y:scroll do listy do sortowania nawet bez właściwości height rozwiązało to dla mnie. Pokazuje tylko wyłączony pasek przewijania, ale jest to w porządku.

Answer 3

Wygląda na to, że jQuery UI 1.9.2 rozwiązało problem.

Jeśli nie można zmienić biblioteki, istnieje obejście obejmujące prostą operację paska przewijania. Pomysł jest prosty:

• Zachowaj poprzednią pozycję przewijania przy każdym przewijaniu.
• Powoduje przewinięcie do poprzedniej pozycji po rozpoczęciu przeciągania elementu.

Tutaj idziesz;

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

Jest to spowodowane wysokością zmiany pojemnika przy sortowaniu (tuż przed utworzeniem zastępczy)

Problemem jest dobrze opisana i odpowiedział w tym przepełnienie stosu: 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; 
     } 
    } 
    }, 
    // ..... 
});