dnd-page-scroll
v0.0.4
Published
Add support scrolling of page during drag and drop (DnD) when not supported by the browser.
Downloads
1,909
Readme
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 library, you now can.
Demo
How to use
<script src="lib/dnd-page-scroll.js"></script>
<script>dndPageScroll.default(/*{...options}*/)</script>
This is a UMD module.
How it works
The library creates invisible elements top and bottom of the viewport. These bind the dragover event to scroll the page.
Options
height
: Height of the invisible elements. Defaults to'50px'
.scrollBy
: Scoll byx
pixels. Defaults to50
.delay
: Scroll everyx
milliseconds. Defaults to25
.topId
: Id attribute of the top invisible element. Defaults to'dnd-page-scroll-top'
.bottomId
: Id attribute of the bottom invisible element. Defaults to'dnd-page-scroll-bottom'
.namespace
: A string appended to the above ids. Defaults to an empty string. Required for having multiple plugin instances.node
: The scrollable area. Defaults todocument.body
.listenGlobally
: When set tofalse
, only listen to drag events withinnode
. Useful when having multiple plugin instances. Defaults totrue
.
Browser support
Tested in latest Firefox, Edge, IE, Safari, and Chrome
Original idea
License: MIT