Nine Pedestrians Mesmerized
Wondering what’s next for npm?Check out our public roadmap! »

zero-drag
TypeScript icon, indicating that this package has built-in type declarations

1.0.0-b5 • Public • Published

zero-drag

A minimalist abstraction of drag-and-drop interactions only - without abstracting the effects. (why?)

Purpose-built for custom in-app drag-and-drop UI - if you need to exchange data/files with the desktop, this is not the library you're looking for.

Features:

  • Generates drag-and-drop event listeners exposing simple start/drag/drop hooks
  • Minimally abstracts dragged item and drop-target selection
  • Reports drag distances and target locations in various useful ways
  • Optional drag threshold (in pixels) before triggering your start hook
  • Optional delayed re-targeting (improves user experience by tracking user intent)
  • Small: just over 1K
  • Works basically anywhere
  • Written in Typescript: fully type-hinted

TODO: tests, touch events, exchanging files/data with the desktop? (contributions welcome.)

Examples

Some basic examples are available here:

https://codesandbox.io/s/4jw0o0ox4x

Disclaimer: I am not a designer, so this looks like a programmer made it. (contributions welcome!)

Install

To install in your project:

npm install zero-drag --save

To import from Typescript:

import { makeListener } from "zero-drag";

Use auto-completion and refer to inline documentation for usage and API details.

Why?

Because reasons:

  • Correctly implementing drag-and-drop interactions is difficult, error-prone and distracting.
  • Implementing the effects of those interactions is already easy - there's no reason to abstract that.
  • Cleanly separating the complexity of drag-and-drop from potentially complex effects make sense either way.
  • Avoiding the implementation of any effects makes this library useful in many contexts, including plain DOM as well as most view-libraries/frameworks.

Alternatives

Some alternative libs and how they differ:

  • dragula - more high-level library implementing things like sort-order and visual effects; bridges to React and Angular.
  • drag-on-drop - larger, more high-level library implementing sortable lists and trees; bridge to React.
  • drag-drop - uses HTML5 drag-events - if you need to exchange data and files with the desktop, this may be the lib you want.

Install

npm i zero-drag

DownloadsWeekly Downloads

7

Version

1.0.0-b5

License

MIT

Unpacked Size

34.4 kB

Total Files

5

Last publish

Collaborators

  • avatar