Scroll while using html5 drag and drop [duplicate]

Question

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.

Answer 1

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.