Giao diện người dùng jQuery Sắp xếp: Cuộn toàn bộ trang cũng như vùng chứa

Question

Tôi có hai danh sách yếu tố và tôi đã bật jQuery UI có thể sắp xếp trên cả hai. Tôi đã sử dụng tùy chọn connectWith để cho phép tôi kéo giữa hai danh sách.

Một danh sách có nhiều thành phần trong đó, vì vậy tôi đã thêm overflow-y: scroll vào nó, nhưng khi tôi cố lấy phần tử từ danh sách đó và kéo nó sang danh sách khác, nó chỉ cuộn danh sách chứ không phải toàn bộ trang.

Tôi đã tạo bản trình diễn jsFiddle (http://jsfiddle.net/MCcuc/). Cuộn xuống và cố gắng di chuyển Item Q (kéo thanh màu xám trên đầu hộp) từ danh sách màu đỏ vào danh sách màu lục. Bạn sẽ thấy các cuộn danh sách màu đỏ, nhưng trang thì không. Làm thế nào tôi có thể cuộn toàn bộ trang cũng như danh sách?

Tôi chỉ cho phép sortable mà không nhiều lựa chọn:

$('.sort').sortable({ 
    connectWith: '.sort', 
    handle: '.handle' 
}); 

Answer 1

Đó là thực sự là một cuộc xung đột với tràn cuộn. Phần tử helper có thể kéo được ràng buộc với phần tử cha của nó trong trường hợp đó, có thể là do cố gắng "thoát ra", cha mẹ chỉ dẫn đến việc mở rộng vùng cuộn của nó.

Giải pháp thay thế là chuyển một hàm helper sao chép phần tử đã kéo và sửa nó dưới phần nội dung trang. Bằng cách này, các yếu tố helper kéo sẽ là bên ngoài của công ty mẹ ban đầu của nó ngay từ đầu, và do đó sẽ di chuyển toàn bộ trang:

$(".sort").sortable({ 
    connectWith: ".sort", 
    handle: ".handle", 
    helper: function(event, element) { 
     return element.clone().appendTo("body"); 
    } 
}); 

Bạn sẽ tìm thấy một fiddle cập nhật chứng minh here này.