使用html5拖放時滾動

我剛剛發現，使用HTML5拖放時 - 嘗試使用鼠標滾輪或鼠標墊滾動頁面將無法工作，並且事件onmousewheel的偵聽器未被調用。使用html5拖放時滾動

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)); 
    });

（這個例子顯示20周的div滾動條，所以你可以嘗試拖動項目，並試圖滾動屏幕同時）

我發現有現在幾年開放對於Firefox的錯誤： https://bugzilla.mozilla.org/show_bug.cgi?id=41708

而且有人創建了一個擴展來支持這一行爲： https://addons.mozilla.org/en-US/firefox/addon/drag-to-scroll-reloaded/

我找不到在Chrome任何類似的錯誤。有沒有解決方案可以在Chrome中使用？

編輯：這在Safari中有效，因此行爲存在於Chrome和Firefox中。

來源

2013-05-29 mbdev

你不滿意拉底部靠近底部，使其滾動？它就是這樣的設計。 – howderek

你能提供一個鏈接嗎？我想不出這個原因。我剛剛在Safari中發現拖放和滾動工作。 – mbdev

我找到了解決方法：[jQueryDndPageScroll]（https://github.com/martindrapeau/jQueryDndPageScroll） – luzny

正如@howderek在他的評論中所述，拖動div到頁面底部會自動滾動頁面。

但是你可以使用一個jQuery插件叫做jQueryDndPageScroll.在網頁中實現它很簡單這些行添加到您的代碼：

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

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

這個插件是開源。所以你可以看到底下發生了什麼。

或者，你可以建議W3C有一個會議，使這個跨瀏覽器。從這裏開始https://discourse.wicg.io/。你可以在那裏開始一個論壇，如果該論壇得到很多關注，W3C可以使其成爲所有瀏覽器的標準。有關更多信息，請參閱this question。

最後一個選項是一個很漫長的過程，而且也不能保證您的建議將被實現爲標準。但是，如果你清楚地陳述你的問題，並獲得其他人的關注，就很有可能取得成功。

來源

2015-09-25 01:15:15 Arjun

-2

我認爲加上這將有助於

$(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(); 
});

這將給其拖動基礎上箭頭鍵的功能按下

來源

2016-03-13 06:51:55 Manish62

問題是關於使用鼠標拖動元素時滾動，所以鍵盤箭頭不相關。 – mbdev

我認爲，這可能是這個問題的解決方案。在這個StackOverflow link你有一個與JSfiddle答案，你可以同時拖動和滾動。

在拖動元素時，可以通過將鼠標移動到頂部或底部頁面進行自動滾動來滾動頁面，也可以同時單擊拖動和旋轉鼠標滾輪。

來源

2017-05-10 12:53:21

使用html5拖放時滾動

回答

相關問題