使用html5拖放时滚动

Question

我刚刚发现当使用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已经有几年的bug了: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中存在这种行为.

Answer 1

正如 @howderek 在他的评论中所述，将 拖动div到页面底部将自动滚动页面。

但是您可以使用名为 jQueryDndPageScroll 的 jQuery 插件。在您的网页中实现它就像将这些行添加到您的代码中一样简单：

<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可以将其成为所有浏览器的标准。请参阅此问题以获取更多信息。

最后一个选项是一个非常漫长的过程，并且不能保证您的建议将作为标准实施。但如果你清楚地陈述你的问题并引起别人的注意，那么成功的可能性就很大。