Add support scrolling of page during drag and drop (DnD) when not supported by the browser.
Last updated 3 years ago by epages .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install dnd-page-scroll 
SYNC missed versions from official npm registry.

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.


How to use

<script src="lib/dnd-page-scroll.js"></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.


  • height: Height of the invisible elements. Defaults to '50px'.
  • scrollBy: Scoll by x pixels. Defaults to 50.
  • delay: Scroll every x milliseconds. Defaults to 25.
  • 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 to document.body.
  • listenGlobally: When set to false, only listen to drag events within node. Useful when having multiple plugin instances. Defaults to true.

Browser support

Tested in latest Firefox, Edge, IE, Safari, and Chrome

Original idea

Martin Drapeau

License: MIT

Current Tags

  • 0.0.4                                ...           latest (3 years ago)

4 Versions

  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.2                                ...           4 years ago
  • 0.0.1                                ...           4 years ago
Maintainers (2)
Today 0
This Week 2
This Month 2
Last Day 2
Last Week 2
Last Month 13
Dependencies (0)
Dependents (2)

Copyright 2014 - 2016 © taobao.org |