使用html5拖放时滚动[重复]

Posted 2023-05-08

【中文标题】使用html5拖放时滚动[重复]

【英文标题】：Scroll while using html5 drag and drop [duplicate]

【发布时间】：2013-05-25 05:55:00

【问题描述】：

我刚刚发现在使用 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 中。

【问题讨论】：

您对拉动靠近底部的 div 使其滚动不满意？设计就是这样。

你能提供一个链接吗？我想不出这是什么原因。我刚刚发现在 Safari 中可以进行拖动和滚动。

我找到了解决方案：jQueryDndPageScroll

大多数关于滚动拖放的可用建议似乎早于现代浏览器。 OP 关于浏览器特定答案的注释应标记为正确答案。 Firefox 的插件完全按预期工作......不是一行代码。

在我的例子中，有一个带有pointer-events: none 的覆盖元素阻止了在 Chrome 中拖动时滚动

【参考方案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 了解更多信息。

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

【参考方案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();
);

这将赋予它基于按下箭头键的拖动功能

【讨论】：

问题是关于使用鼠标拖动元素时滚动，因此键盘箭头不相关。