JQuery UI sắp xếp trong một container cuộn - vị trí cuộn "nhảy" khi sắp xếp

Question

Vui lòng kiểm tra câu hỏi này gần như giống hệt nhau đầu tiên: jQuery Sortable List - scroll bar jumps up when sorting

tôi có chính xác cùng một vấn đề, duy nhất mà tôi đã thử tất cả các giải pháp đề xuất rằng không có may mắn

Dưới đây là cách để tái tạo

• tạo sortable list
• có nó cuộn
• cuộn xuống
• mục sắp xếp lại
vị trí
• cuộn "nhảy" lên

Đây là mã (xem thêm tại 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%; 
} 
​ 

Đây là mã (trong JSFiddle) sau khi thử các khái niệm của accepted answer (không có may mắn)

tôi có thể cố gắng tìm hiểu tại sao nó xảy ra (danh sách nhận được "rút ngắn" trong một giây nhanh), nhưng tất cả các nỗ lực để sử dụng trình giữ chỗ hoặc người trợ giúp để tránh nó không hoạt động eithe r. Tôi cảm thấy tôi đã cố gắng gần như bất kỳ hoán vị của các tùy chọn "cuộn" không có may mắn

trình duyệt tôi đã cố gắng

IE9, Firefox 10.0.1 và Chrome 17

JQuery phiên bản

lõi 1.7.1, Giao diện người dùng v 1.8.17

Tôi có làm gì sai không? Có giải pháp nào không? Nó có thể là một lỗi?

Answer 1

Nếu bạn modifiy CSS của bạn cho các phần tử .scroll bằng cách thêm:

position:relative; 

Điều đó sẽ giải quyết vấn đề này.

Answer 2

Thêm overflow-y:scroll vào danh sách có thể sắp xếp ngay cả khi không có thuộc tính height đã giải quyết nó cho tôi. Nó chỉ hiển thị thanh cuộn đã tắt, nhưng không sao.

Answer 3

Có vẻ như Giao diện người dùng jQuery 1.9.2 đã giải quyết được sự cố.

Nếu bạn không thể thay đổi thư viện, có một cách giải quyết khác bao gồm thao tác thanh cuộn đơn giản. Ý tưởng rất đơn giản:

• Giữ vị trí cuộn trước đó mỗi khi bạn cuộn.
• Đặt cuộn lùi về vị trí trước đó khi bạn bắt đầu kéo phần tử của mình.

Ở đây bạn đi;

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

này là do chiều cao của sự thay đổi thùng chứa khi sắp xếp (ngay trước khi giữ chỗ được tạo ra)

Vấn đề được mô tả tốt và trả lời trong đống này tràn: 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; 
     } 
    } 
    }, 
    // ..... 
});