In Planbox we implemented HTML5 drag and drop. This allows you to prioritize items and tasks and move them around.
But sometimes the drop target is not visible being offscreen above or below. The natural reflex is to move the mouse cursor beyond the view port and expect that the page scrolls. Unfortunately, this doesn’t work in most browsers (except for Chrome). Yes, even the latest Internet Explorer 9 and Firefox 8 don’t scroll!
So we implemented jQueryDndPageScroll; a jQuery plugin which does it for you transparently, and efficiently. To use the plugin, download the Javascript file and put it on your server. Then include it and call it as such:
<script type="text/javascript" src="/js/jquery.dnd_page_scroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().dndPageScroll();
});
</script>
How it works is pretty simple. We create two transparent DIV elements at position fixed: one at the top of the page, and the other at the bottom. They are both hidden at first. When a dragstart event is triggered, they are shown (although since they are transparent, the user does not see them). When the mouse cursor enters either (bound on the dragover event), the page is scrolled. When the dragend events is triggered, the DIV elements are hidden. And that’s it!
We spun it out as open source on GitHub. Feel free to fork it and enhance it.
