19

I just found that when using HTML5 drag and drop - attempting to use the mousewheel or mouse pad to scroll the page will not work and listeners for the event onmousewheel are not getting called.

As an example see here: 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));
    });

(The example shows 20 divs with scrollbar so you can try dragging item and attempting to scroll the screen the same time)

I found there is a bug open for FireFox for a few years now: https://bugzilla.mozilla.org/show_bug.cgi?id=41708

And someone created an extension to support this behavior: https://addons.mozilla.org/en-US/firefox/addon/drag-to-scroll-reloaded/

I could not find any similar bug in Chrome. Is there a solution for this that works in Chrome as well?

Edit: This does work in Safari, so the behavior exists in Chrome and Firefox.

mbdev
  • 6,343
  • 14
  • 46
  • 63
  • 2
    You aren't satisfied with pulling the div near the bottom to make it scroll? It is like that by design. – howderek May 29 '13 at 20:11
  • Can you provide a link? I can't think of a reason for this. I just found drag & scroll works in Safari. – mbdev May 29 '13 at 23:55
  • 1
    I found solution: [jQueryDndPageScroll](https://github.com/martindrapeau/jQueryDndPageScroll) – luzny Feb 27 '15 at 13:27
  • Most of the available advice on scrolling for drag and drop seems to predate modern browsers. The OP's notes about browser specific answers should be marked as the correct answer. The addon for firefox worked exactly as expected...not a single line of code. – globalSchmidt Apr 05 '15 at 16:56
  • In my case, there was an overlay element with `pointer-events: none` which prevented scrolling while dragging in Chrome – Kasper May 11 '21 at 00:19

2 Answers2

3

As @howderek stated in his comment, dragging the div to the bottom of the page will automatically scroll the page.

But you can use a jQuery Plugin called jQueryDndPageScroll. Implementing it in your webpage is as simple adding these lines to your code:

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

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

This plugin is open-source. So you can see what's going under the hood.

Alternatively, you can suggest W3C to have a meet to make this cross-browser. Start here https://discourse.wicg.io/ . You can start a forum there and if that forum gets a good amount of attention, W3C can make it a standard for all browsers. See this question for more info.

The last option is a very lengthy process and there's no guarantee that your suggestion will be implemented as a standard. But if you state your problem clearly and you get attention by others, there is a good possibility of success.

Community
  • 1
  • 1
Arjun
  • 1,261
  • 1
  • 11
  • 26
-7

I think adding this will help

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

This will give it feature of dragging based on arrow key pressed

Manish62
  • 154
  • 1
  • 1
  • 13
  • 4
    The question is about scrolling while dragging elements using the mouse, so keyboard arrows are not relevant. – mbdev Mar 16 '16 at 23:40