17

HTML5 のドラッグ アンド ドロップを使用している場合、マウスホイールまたはマウス パッドを使用してページをスクロールしようとしても機能せず、イベント onmousewheel のリスナーが呼び出されないことがわかりました。

例として、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));
    });

(この例では、スクロールバー付きの 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 に存在します。

4

2 に答える 2

3

@howderek がコメントで述べたように、 をdivページの一番下にドラッグすると、ページが自動的にスクロールされます。

ただし、 jQueryDndPageScrollという jQuery プラグインを使用できます。Web ページに実装するには、次の行をコードに追加するだけです。

<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はそれをすべてのブラウザーの標準にすることができます。詳細については、この質問を参照してください。

最後のオプションは非常に時間のかかるプロセスであり、提案が標準として実装されるという保証はありません。しかし、自分の問題を明確に述べ、他の人の注意を引くことができれば、成功する可能性は十分にあります。

于 2015-09-25T01:15:15.057 に答える
-6

これを追加すると役立つと思います

$(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-13T06:51:55.457 に答える