@shopify/draggable

---

---

Warning: Draggable is currently in beta

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

• Install
• Documentation
• Contributing
• Roadmap
• Copyright

Install

You can install the library via npm.

npm install @shopify/draggable --save

or via yarn:

yarn add @shopify/draggable

or via CDN

<!-- Entire bundle -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.4/lib/draggable.bundle.js"></script>
<!-- legacy bundle for older browsers (IE11) -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.4/lib/draggable.bundle.legacy.js"></script>
<!-- Draggable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.4/lib/draggable.js"></script>
<!-- Sortable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.4/lib/sortable.js"></script>
<!-- Droppable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.4/lib/droppable.js"></script>
<!-- Swappable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.4/lib/swappable.js"></script>
<!-- Plugins only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.4/lib/plugins.js"></script>

Documentation

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

• Draggable
  • DragEvent
  • DraggableEvent
  • MirrorEvent
  • Plugins
    • Accessibility
    • Mirror
  • Sensors
    • DragSensor
    • ForceTouchSensor
    • MouseSensor
    • Sensor
    • SensorEvent
    • TouchSensor
• Droppable
  • DroppableEvent
• Plugins
  • Collidable
  • Snappable
  • SwapAnimation
• Sortable
  • SortableEvent
• Swappable
  • SwappableEvent

Contributing

Contributions are more than welcome, the code base is still new and needs more love.

For more information, please checkout the contributing document.

Roadmap

The roadmap for the official release is still in the works. More to come

Copyright

Copyright (c) 2018 Shopify. See LICENSE.md for further details.

Changelog

v1.0.0-beta.4 - 2018-01-15

Added

• Default Draggable plugins get exposed statically on Draggable.Plugins
• Default Scrollable plugin for Draggable, which auto scrolls containers/viewport while dragging
• yarn watch task for auto-building the library
• source:original class option for Draggable
• Draggable#getDraggableElementsForContainer method, which returns all draggable elements for a given container
• MirrorCreateEvent, which allows for canceling mirror creation
• AbstractPlugin to use as Base class for all Draggable plugins
• More test coverage

Changed

• Fixed Sortable sort logic by excluding mirror and original source elements in calculations
• Draggable appendTo option now uses sources parent element as default, instead of document.body
• Draggable appends over classes after triggering over/out events
• Draggable appends source into empty containers
• Mirrors margin gets removed on creation in the mirror plugin
• Fix for mirror when drag start gets canceled
• Fixes memory leak in Draggable when calling destroy()
• Fixes race condition for the source:placed class
• Changed AbstractEvent#_canceled to use symbols for private instance variables
• Some fixes for the documentation READMEs