javascript 使用 html5 拖放时滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16822920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll while using html5 drag and drop
提问by mbdev
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.
我刚刚发现在使用 HTML5 拖放时 - 尝试使用鼠标滚轮或鼠标垫滚动页面将不起作用，并且不会调用 onmousewheel 事件的侦听器。
As an example see here: http://jsfiddle.net/92u6K/2/
作为示例，请参见此处：http: //jsfiddle.net/92u6K/2/
jQuery
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)
（该示例显示了 20 个带有滚动条的 div，因此您可以尝试拖动项目并同时尝试滚动屏幕）
I found there is a bug open for FireFox for a few years now: https://bugzilla.mozilla.org/show_bug.cgi?id=41708
我发现几年来 FireFox 有一个漏洞：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/
有人创建了一个扩展来支持这种行为：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?
我在 Chrome 中找不到任何类似的错误。是否有适用于 Chrome 的解决方案？
Edit: This does work in Safari, so the behavior exists in Chrome and Firefox.
编辑：这在 Safari 中确实有效，因此该行为存在于 Chrome 和 Firefox 中。
回答by Arjun
As @howderek stated in his comment, dragging the divto the bottom of the page will automatically scroll the page.
正如@howderek 在他的评论中所说，将 拖到div页面底部将自动滚动页面。
But you can use a jQuery Plugin called jQueryDndPageScroll.Implementing it in your webpage is as simple adding these lines to your code:
但是您可以使用名为jQueryDndPageScroll的 jQuery 插件。在您的网页中实现它就像将这些行添加到您的代码中一样简单：
<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 W3Cto 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, W3Ccan make it a standard for all browsers. See this questionfor more info.
或者，您可以建议W3C召开会议以制作此跨浏览器。从这里开始https://discourse.wig.io/。您可以在那里创建一个论坛，如果该论坛获得大量关注，W3C可以使其成为所有浏览器的标准。有关更多信息，请参阅此问题。
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.
最后一个选项是一个非常漫长的过程，不能保证您的建议将作为标准实施。但是如果你把你的问题说清楚，并且得到别人的关注，那么成功的可能性就很大。
回答by Manish62
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
这将赋予它基于按下的箭头键进行拖动的功能
