Get complete control over drag and drop behaviour with Draggable! Draggable abstracts native browser events into a comprehensive API to create a custom drag and drop experience. Draggable comes with additional modules: Sortable, Droppable, Swappable. Draggable itself does not perform any sorting behaviour while dragging, but does the heavy lifting, e.g. creates mirror, emits events, manages sensor events, makes elements draggable.

The additional modules are built on top of Draggable and therefore provide a similar API interface, for more information read the documentation below.

Features

• Works with native drag, mouse, touch and force touch events
• Can extend dragging behaviour by hooking into draggables event life cycle
• Can extend drag detection by adding sensors to draggable
• The library is targeted ES6 first

Table of Contents

• Table of Contents
• Install
• Browser Compatibility
• Documentation
• Running examples
• Contributing

Install

You can install the library via pnpm.

pnpm install @hnrq/draggable --save

Browser Compatibility

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Documentation

You can find the documentation for each module within their respective directories.

• Draggable
  • DragEvent
  • DraggableEvent
  • Plugins
    • Announcement
    • Focusable
    • Mirror
    • MirrorEvent
    • Scrollable
  • Sensors
    • DragSensor
    • ForceTouchSensor
    • MouseSensor
    • Sensor
    • SensorEvent
    • TouchSensor
• Droppable
  • DroppableEvent
• Plugins
  • Collidable
  • ResizeMirror
  • Snappable
  • SwapAnimation
  • SortAnimation (Added in: v1.0.0-beta.10)
• Sortable
  • SortableEvent
• Swappable
  • SwappableEvent

Running examples

To run the examples project locally, simply run the following from the examples folder:

pnpm build && pnpm dev

Contributing

Contributions are more than welcome, the code base is still new and needs more love. For more information, please checkout CONTRIBUTING.md.