@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.3/lib/draggable.bundle.js"></script>
<!-- legacy bundle for older browsers (IE11) -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.3/lib/draggable.bundle.legacy.js"></script>
<!-- Draggable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.3/lib/draggable.js"></script>
<!-- Sortable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.3/lib/sortable.js"></script>
<!-- Droppable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.3/lib/droppable.js"></script>
<!-- Swappable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.3/lib/swappable.js"></script>
<!-- Plugins only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.3/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) 2017 Shopify. See LICENSE.md for further details.

Changelog

v1.0.0-beta.3 - 2017-11-01

Added

• Bundle split, draggable now exports multiple bundles
  • Adds JS bundle per module
  • Adds legacy bundle for IE11
• Adds axis & dimension constraint options for mirror plugin
• Basic swap animation plugin
• Draggables API is now accessible via inheritance for Sortable, Swappable and Droppable
• Draggables API extended
  • addSensor to add sensor dynamically
  • removeSensor to remove a sensor dynamically
  • addPlugin to add a plugin dynamically
  • removePlugin to remove a plugin dynamically
  • addContainer to add a container dynamically
  • removeContainer to remove a container dynamically
  • isDragging to check if instance is currently dragging
• New sortable:sort event that can be canceled to prevent sorting
• New swappable:swap event that can be canceled to prevent swapping
• Added more documentation

Changes

• SortableSortedEvent (sortable:sorted) now returns correct indexes
• SortableStartEvent gets fired now
• Plugins and Sensors are exported with namespace
• Removes reflow by removing unused lookup of next scroll parent
• Draggable delay option is now 100 by default, instead of 0
• Draggables private methods are now really private
• Sensor improvements
  • TouchSensor now prevents scrolling without preventDefault
  • MouseSensor now prevents native elements to start dragging during delay
  • All sensors now listen to document rather than each container