javascript – 使用html5拖放滚动

前端之家收集整理的这篇文章主要介绍了javascript – 使用html5拖放滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我刚刚发现,当使用 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));
    });

(The example shows 20 divs with scrollbar so you can try
dragging item and attempting to scroll the screen the same time)

我发现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中存在这种行为.

解决方法

正如@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.

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.

猜你在找的JavaScript相关文章