Scroll while using html5 drag and drop

This question already has an answer here:

Make HTML5 draggable items scroll the page? 3 answers

---

As @howderek stated in his comment, dragging the div to the bottom of the page will automatically scroll the page.

But you can use a jQuery Plugin called jQueryDndPageScroll. Implementing it in your webpage is as simple adding these lines to your code:

<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 W3C to 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, W3C can make it a standard for all browsers. See this question for more info.

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.

---

I believe that this can be a solution for this problem. On this StackOverflow link you have an answer with JSfiddle and you can drag and scroll at the same time.

While you are dragging an element you can scroll page by moving mouse to top or bottom page for autoscroll, or you can click to drag and rotate mouse wheel at the same time.

---

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

链接地址: http://www.djcxy.com/p/64276.html

上一篇: dragover事件并不是在firefox中没有发射

下一篇: 滚动时使用html5拖放