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已经有几年的错误了： 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 可以使其成为所有浏览器的标准。有关详细信息，请参阅this question。

最后一个选项是一个非常漫长的过程，并且无法保证您的建议将作为标准实施。但是如果你清楚地陈述你的问题而你得到别人的关注，那么很有可能取得成功。

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

这将为其提供基于按下箭头键的拖动功能

使用html5拖放时滚动

2 个答案: