Cuộn trong khi sử dụng kéo và thả html5

Question

Tôi chỉ thấy rằng khi sử dụng kéo và thả HTML5 - cố gắng sử dụng con lăn chuột hoặc chuột để cuộn trang sẽ không hoạt động và người nghe cho sự kiện onmousewheel không được gọi.

Như một ví dụ xem tại đây: http://jsfiddle.net/92u6K/2/

jQuery

var $dragging = null; 
    $('.item').bind('dragstart', function(e) { 
     $dragging = $(e.currentTarget) 
    }); 

    $('.item').bind('dragover', function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    }); 

    $('.item').bind('drop', function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 

     $dragging.unbind(); 
     $dragging.insertBefore($(e.currentTarget)); 
    }); 

(Ví dụ cho thấy 20 divs với thanh cuộn để bạn có thể thử kéo mục và cố gắng để di chuyển các màn hình cùng một lúc)

Tôi thấy có một lỗi mở cho FireFox cho một vài năm nay: https://bugzilla.mozilla.org/show_bug.cgi?id=41708

Và một người nào đó tạo ra một phần mở rộng để hỗ trợ hành vi này: https://addons.mozilla.org/en-US/firefox/addon/drag-to-scroll-reloaded/

tôi không thể tìm thấy bất kỳ lỗi tương tự trong Chrome. Có một giải pháp cho điều này cũng hoạt động trong Chrome không?

Chỉnh sửa: Tính năng này hoạt động trong Safari, vì vậy hành vi tồn tại trong Chrome và Firefox.

Answer 1

Như @howderek đã nêu trong nhận xét của mình, kéo div xuống cuối trang sẽ tự động cuộn trang.

Nhưng bạn có thể sử dụng một jQuery Plugin gọi jQueryDndPageScroll. Thực hiện nó trong trang web của bạn cũng đơn giản thêm những dòng này vào mã của bạn:

<script type="text/javascript" src="/js/jquery.dnd_page_scroll.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $().dndPageScroll(); 
    }); 
</script> 

Plugin này là mã nguồn mở. Vì vậy, bạn có thể xem những gì đang đi theo mui xe.

Hoặc, bạn có thể đề xuất W3C để gặp gỡ để làm cho trình duyệt chéo này. Bắt đầu tại đây https://discourse.wicg.io/. Bạn có thể bắt đầu một diễn đàn ở đó và nếu diễn đàn đó nhận được một số lượng đáng chú ý, W3C có thể làm cho nó trở thành một tiêu chuẩn cho tất cả các trình duyệt. Xem this question để biết thêm thông tin.

Tùy chọn cuối cùng là quá trình rất dài và không đảm bảo rằng đề xuất của bạn sẽ được thực hiện như một tiêu chuẩn. Nhưng nếu bạn nêu rõ vấn đề của bạn và bạn nhận được sự chú ý của người khác, có khả năng thành công tốt.

Answer 2

Tôi nghĩ rằng việc thêm này sẽ giúp

$(document).keydown(function(e) { 
switch(e.which) { 
    case 37: // left 
    break; 

    case 38: // up 
    break; 

    case 39: // right 
    break; 

    case 40: // down 
    break; 

    default: return; // exit this handler for other keys 
} 
e.preventDefault(); 
}); 

này sẽ cung cấp cho nó tính năng của kéo dựa trên phím mũi tên ép

Answer 3

Tôi tin rằng điều này có thể là một giải pháp cho vấn đề này. Trên số điện thoại StackOverflow link này, bạn có câu trả lời với JSfiddle và bạn có thể kéo và cuộn cùng một lúc.

Trong khi bạn đang kéo một phần tử, bạn có thể cuộn trang bằng cách di chuyển chuột lên đầu hoặc cuối trang để tự động cuộn hoặc bạn có thể nhấp để kéo và xoay bánh xe chuột cùng một lúc.