Skip to content

Enable scrolling of the page during an HTML5 drag and drop operation

Notifications You must be signed in to change notification settings

JohnGale87/jQueryDndPageScroll

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 

Repository files navigation

USE CASE:
If you are using HTML5 drag and want to drop into an element not visible in the viewport,
it is not possible on most browsers. On Google Chrome you can. Moving the dragged element
near the top or bottom of the viewport will scroll the page. But other browsers don't do
that. With this jQuery plugin, you now can.

HOW TO USE:
Simply call this function and that's it!
$().dndPageScroll();

If you're new to programming, call this in a script tag as such:
<script type="text/javascript">
	$(document).ready(function() {
		$().dndPageScroll();
	});
</script>

HOW IT WORKS:
The plugin creates invisible elements top and bottom of the viewport.
These bind the dragenter and dragover events to scroll the page.
The plugin is smart enough not to conflict with native page scroll such
as in Google Chrome.

OPTIONS:
topId: Id of DIV element put at top of the viewport. Default is
       top_scroll_page.
bottomId: Id of DIV element put at bottom of the viewport. Default
       is bottom_scroll_page.
delay: An integer indicating the number of milliseconds between
       scroll events. Default is 50.
height: An integer value how tall the top/bottom elements
        should be. Default is 20.

BROWSER SUPPORT:
Tested in the latest Chrome, Safari and FireFox.
Also test on IE9 and IE8.

Author: Martin Drapeau
Copyright: Planbox Inc. 2011
License: MIT License (http://en.wikipedia.org/wiki/MIT_License)

About

Enable scrolling of the page during an HTML5 drag and drop operation

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%