shopify/draggable

The JavaScript Drag & Drop library your grandparents warned you about.

Development

Draggable is no longer maintained by its original authors. Maintenance of this repo has been passed on to new collaborators and is no longer worked on by anyone at Shopify.

We are still looking for more maintainers! If anyone is interested in answering / triaging issues, reviewing / rejecting / approving PRs, and authoring code for bug fixes / new features — please send an email to max.hoffmann (at) shopify (dot) com. You may be asked a few questions before obtaining collaboration permission, but if everything checks out, we will happily add you as a collaborator.

---

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 type="module">
  import {
    Draggable,
    Sortable,
    Droppable,
    Swappable,
  } from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/index.mjs';
</script>
<!-- Draggable only -->
<script type="module">
  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.mjs';
</script>
<!-- Sortable only -->
<script type="module">
  import Sortable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Sortable/Sortable.mjs';
</script>
<!-- Droppable only -->
<script type="module">
  import Droppable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Droppable/Droppable.mjs';
</script>
<!-- Swappable only -->
<script type="module">
  import Swappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Swappable/Swappable.mjs';
</script>
<!-- Plugins only -->
<script type="module">
  import * as Plugins from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/index.mjs';
</script>
<!-- UMD browser -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
<script>
  console.log(window.Draggable);
</script>

Browser Compatibility

Check the "browserlist" property in package.json for more info

Last 3 versions ✔	Last 3 versions ✔	Last 3 versions ✔	Last 3 versions ✔	Last 3 versions ✔

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
• Sortable
  • SortableEvent
• Swappable
  • SwappableEvent

TypeScript

Draggable includes TypeScript definitions.

Documentation

Running examples

To run the examples project locally, simply run the following from the draggable root:

yarn && yarn start

This will start a server that hosts the contents of examples/. It also watches for file changes from both src/ and examples/src and reloads the browser.

Contributing

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

For more information, please checkout the contributing document.

Related resources

• Ember CLI Shim on Github by @timrourke
• Ember CLI Shim on NPM by @timrourke

Copyright

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

draggable's Issues

Does draggable support nested dropzones?

E.G. I have a drop zone as one of the elements in a drop zone, and its siblings should be able to be dragged beside it or inside it. Is this possible currently? I would have an arbitrary number of levels of nesting.

When will draggable leave beta?

Contributing: Separate unit tests from integration tests?

I've started contributing to draggable mostly by writing unit tests. Hopefully my work so far has been helpful! 😄

As I add unit test coverage, it strikes me that there are good reasons to start separating out unit tests from integration tests that rely on simulating user input (eg. triggering mouse events), or incorporate interactions between multiple components of the library (eg. testing that dragged elements collide).

Does this make sense? If so, what organizational approach for grouping like tests would be idiomatic to Jest?

Multi-select support?

Hi guys, fantastic work. I'm really loving this package.

Do you have any plans to add in functionality to select multiple draggable elements?

It'd be really neat if multiple items could be cloned and follow the cursor onDrag

How to add animations for Sortable?

Hi, you guys has done some awesome work!

I'm wondering if draggable has internal support for Sortable animation, for example:
http://rubaxa.github.io/Sortable/

[Bug] Empty catch block throws warnings

Trying to get a basic drag and drop setup working with custom elements. My setup looks like this:

//Draggable is expecting a node list, but I have a direct reference to the element, so I wrap it in an array to simulate being _like_ a node list (could be an issue, but this would be a feature request to enable)
this._draggable = new Draggable([this._element.parentElement], {
            draggable: 'element-type' //My custom element I'm creating a drag event for is a <element-type> 
        });

When I click and try to drag the element, I get these warnings thrown in the console (and no drag and drop behavior):

Warning: .then() only accepts functions but was passed: [object Undefined], [object Undefined]
    (No stack trace)

Looking at where it's throwing, it seems based on this empty catch block (

draggable/src/Draggable/Plugins/Mirror/Mirror.js

Line 51 in 23a7f3a

.catch();

). I do not believe an empty catch block is allowed as per the spec (http://www.ecma-international.org/ecma-262/6.0/#sec-promise.prototype.catch).
I am using BlueBird as a promise library, so that's probably where the warnings are being thrown from, but nevertheless, an empty catch block should be invalid.

Quick console demo.

var testfn = function(){console.log('test')};
Promise.resolve({}).then(testfn).catch();
//Warning: .then() only accepts functions but was passed: [object Undefined], [object Undefined]
//    at <anonymous>:2:39

Incorrect README Contribution link

contribution vs contributing

Safari support?

Very nice project, however, Does not seem to work on Safari.

I have opened the https://shopify.github.io/draggable/ link and nothing is draggable hehe.

Info:

macOS Sierra 10.12.6 (16G29)
Safari Version 11.0 (12604.1.38.1.7)

Sorting elements causes text highlight on macOS Chrome

I'm trying to set up a Sortable with HTML that looks like this:

<div class="d-container">
  <div class="draggable-source">
    <span class="d-handle"><svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" /></svg></span>
    <span>Text here</span>
  </div>
  <!-- other draggable items marked up as above -->
</div>

Here is how I'm setting up the Sortable:

let elem = document.querySelectorAll('.d-container')
new Sortable(elem, {
  handle: '.d-handle'
})

Sorting works, but after I mouse down, the browser acts like I am selecting text, as you can see in this lovely GIF:

(Note that I'm using the CSS cursor property to set the cursor to pointer; without that set, it'd be the text selection cursor.)

Is this a bug, or am I doing something wrong?

Mac OS X: control + click causes bugs

I believe beta2 solves right-click issues... but the same will need to be done for control + click, which is a Mac OS X keycombo for right-click.

Not working on Safari

When trying to drag, the object does not move. Worked on Chrome.

Safari 10.1.2
macOS 10.12.6
Macbook Pro 2016

Easter egg puzzle is too hard

The puzzle on the top of the homepage that - assumedly - when you solve - gives a great easter egg surprise, is too hard. Unlike the puzzles in the iOS game "klocki" you can't reason your way to a solution, you have to guess and check hundreds of combinations, because there are too many choices.

Fire drag:stop event after mirror is cleaned up

I recently upgraded an application from 1.0.0-beta to 1.0.0-beta.2 and noticed a change in behavior. Specifically, it looks like the drag:stop event is now fired before the mirror element is cleaned up. Our code was written to fire on sortable:stop and traverse the target container to check for the new order of its child elements. After upgrading to 1.0.0-beta.2, we now see both the original element and the mirror element as children of the target container inside the sortable:stop event.

Here's the relevant code:

draggable/src/Draggable/Draggable.js

Lines 394 to 413 in b2ff5da

	this.triggerEvent(dragStopEvent);
	this.source.parentNode.insertBefore(this.originalSource, this.source);
	this.source.parentNode.removeChild(this.source);
	this.originalSource.style.display = '';
	this.source.classList.remove(this.getClassNameFor('source:dragging'));
	this.originalSource.classList.add(this.getClassNameFor('source:placed'));
	this.sourceContainer.classList.add(this.getClassNameFor('container:placed'));
	this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging'));
	document.body.classList.remove(this.getClassNameFor('body:dragging'));
	applyUserSelect(document.body, '');
	if (this.currentOver) {
	this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
	}
	if (this.currentOverContainer) {
	this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
	}

Would it make sense to move the triggerEvent call to the bottom of that block?

For the time being, our workaround was to switch to the (undocumented) mirror:destroy event.

Contributing: What docblock spec should be used?

What specification should contributors target for docblocks? What is Shopify's styleguide for in-code documentation?

Would be excellent to include that information in the Contributing portion of the readme.

Thanks!

How to access plugins in browser?

Here is an example:

https://jsfiddle.net/gnvpywuz/1/

I've tried the following:

plugins: [Accessibility]
plugins: ['Accessibility']
plugins: [Draggable.Accessibility]

[Feature Request] Angular 4+ wrapper

It would be nice to provide an Angular 4+ library wrapper for this awesome library.

Support for Internet Explorer 11

Currently the demo page is not working on IE11. Will this library get support for IE11 in the future?

Draggable is not a constructor

Hi I'm trying to use Draggable from a CDN, but I'm constantly getting the same error:

localhost/:5 Uncaught TypeError: Draggable is not a constructor
    at localhost/:5

Here is how I imported and called the function on my html file:

<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.min.js"></script>
  <script>
    new Draggable(document.querySelectorAll('ul'))
      .on('drag:start', () => console.log('drag:start'))
      .on('drag:move',  () => console.log('drag:move'))
      .on('drag:stop',  () => console.log('drag:stop'));
  </script>

How to allow dragging only horizontally (x axis)

Is it possible to only allow draggable element to be moved only horizontally?

is this a good(-enough) replacement for jquery-ui sortable?

I'm currently using jquery-ui sortable. it doesn't work well on a mobile device. I'd like to find a good replacement. how well would this replace jquery-ui sortable? Specifically, I'd like to know if your library supports dragging nodes from one list to another, or as another poster asked, can I build Trello with this?

Source element does not move when using Sortable with Snappable

When using Sortable with the Snappable plugin, my source element does not move. As I continue to drag I can see the snapping/sorting working correctly, but since the source element doesn't move it's near impossible to use.

let $container = document.querySelectorAll('draggable-container');
let inst = new Sortable($container, {
    draggable: 'device-group',
    handle: '.drag-handle',
    plugins: [Snappable],
    delay: 200
});

Any ideas?
Thanks.

Keyboard accessibility

The examples need to have draggable elements that are focusable and actionable by the keyboard (some people cannot use a mouse!).

Sortable

I'm trying to achieve the same Sorting behavior as you demonstrate on the Sorting session in here (including animation and sound): https://shopify.github.io/draggable.

Here is my code:

  <div class="grid-container">
      <div class="grid-x">
        <div class="small-12 large-3 cell"><img class="thumbnail" src="./images/01.jpg" /></div>
        <div class="small-12 large-3 cell"><img class="thumbnail" src="./images/02.jpg" /></div>
        <div class="small-12 large-3 cell"><img class="thumbnail" src="./images/03.jpg" /></div>
        <div class="small-12 large-3 cell"><img class="thumbnail" src="./images/04.jpg" /></div>
        <div class="small-12 large-3 cell"><img class="thumbnail" src="./images/05.jpg" /></div>
        <div class="small-12 large-3 cell"><img class="thumbnail" src="./images/06.jpg" /></div>
        <div class="small-12 large-3 cell"><img class="thumbnail" src="./images/07.jpg" /></div>
        <div class="small-12 large-3 cell"><img class="thumbnail" src="./images/08.jpg" /></div>                
      </div>
  </div>

  <script src="js/bundle.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.min.js"></script>
  <script>
    new Draggable.Draggable(document.querySelectorAll('div.grid-x'), {
      draggable: 'div.cell'
    })
      .on('drag:start', () => console.log('drag:start'))
      .on('drag:move',  () => console.log('drag:move'))
      .on('drag:stop',  () => console.log('drag:stop'));
      
    new Draggable.Sortable(document.querySelectorAll('div.grid-x'), {
      draggable: 'div.cell',
    });

      .on('sortable:start', () => console.log('sortable:start'))
      .on('sortable:sorted', () => console.log('sortable:sorted'))
      .on('sortable:stop', () => console.log('sortable:stop'));


  </script>  

Sortable start event not firing (chrome 61.0.31)

Following the Sortable example from docs, Sortable:start event is not firing. Instead, the drag start event is firing. That's fine, but should be documented.

Parameter in sortable:sorted Event does not have the correct indexes

Parameter in sortable:sorted event callback has the following data structure

@type { Object } e - Parameter in sortable:sorted event callback
@prop { Object } e.data
@prop { Object } e.data.moves
@prop { Object } e.data.moves.oldIndex
@prop { Object } e.data.moves.newIndex

The oldIndex and newIndex are inconsistent depending on the source element's original order in the list.
Calculation of the indexes should consider the cloned source element, because before dragging, there are, say, 4 elements in the list. On dragging, a new cloned element is inserted into the list, so there will be 5 elements in the list.

Can this be used with the Vue framework?

Unable to use this with ReactJS

I've the following html structure:

<div className="items__food">
  <div className="food food--apple">
    <img src={Apple} alt="Apple" />
  </div>
  <div className="food food--banana">
    <img src={Banana} alt="Banana" />
  </div>
  <div className="food food--bread">
    <img src={Bread} alt="Bread" />
  </div>
</div>

And in my componentDidMount, I'm doing:

new Draggable(document.querySelectorAll('.items__food'))
  .on('drag:start', () => console.log('drag:start'))
  .on('drag:move',  () => console.log('drag:move'))
  .on('drag:stop',  () => console.log('drag:stop'));

However, I'm unable to drag any .food items and as a result, nothing is outputted on the console.

As you can see that `.items__food` isn't empty inside the `componentDidMount` lifecycle hook. Am I missing something here?

Bug when swapping

Hey there,

I found a bug when you drag one element over another to make them swap places. Thing is, when you move an element to another container/context, all of a sudden that element somehow becomes the target even when you move to another element. This results in an odd three-way swapping. Is this intended?

I made a GIF to illustrate that:

Cheers,
Thorsten

[Feature Request] Source code for example gh-page

can you share source code for example gh-page?

tile got stuck while trying to solve puzzle

I don't know how to reproduce the issue, but it seems that there's some hole in the state.
I don't know the architecture of the library to point, but probably the library expects some chain of events to fire, and maybe that event did not fire in the chain expected or something like that.
I'm reporting just to let you know that not all scenarios are covered.

First on tile got stuck, I tried to drag it again, and another tile lifted instead, and also got stuck.
Then they got fixed on the page, like scrolling shows.

Duplication in the "Collide" Demo

I somehow managed to duplicate one of the draggable blocks in the "collide" demo. It now stays fixed in it's position (when scrolling as well) without any possibility of interacting with it. The original is still there and works fine.

Effects are not limited to the tab

When the sound is muted, the sound of videos playing in other tabs is also muted.

This can be seen when youre hovering over the block below "Interaction".

Specify Node Version(s) for Development

To make it easier for people to contribute, I think it would be helpful to specify supported/required Node versions for working on the codebase. There are a variety of ways this can be specified...

package.json "engines" field: https://docs.npmjs.com/files/package.json#engines

Has the downside of being weakly enforced by default even when "engineStrict": true is present. This SO answer recommends using a npm postinstall hook along with the semver package to compare the package.json's "engines" field against the current node version.

Alternatively, there's .nvmrc or .tool-versions which AFAIK is designed to be used with asdf.

Cheers~

Boxes get duplicated when dragging too fast

On the homepage, I repeatedly dragged the purple box downwards very quickly and released my mouse. Eventually, this occurred

When in this state, some boxes that I dragged only had the black outline visible, and the entire box was transparent. When I released the box, sometimes it would "go back" to where it was supposed to go (since it was in an invalid are) and sometimes it just stayed there. I did this several times, and ended up with this:

I then scrolled up to the top of the homepage (without refreshing) and got this (the boxes seemed to be fixed to the web page when I was scrolling up and down)

I'm using the latest version of google chrome at the time of this writing, and am using Windows 10 with all updates installed.

Local setup guide

Hi! I'm looking to send in some issues and PRs regarding accessibility, but before I do that I need to know how to set things up locally!

I have the project forked and cloned, and I'm running a local Python http server on the gh-pages branch, as that branch includes the index.html file.

My question is, when I make a change do I need to run npm run build after each save in order to see my changes? If so, perhaps we could implement something like browsersync to automatically run the build on save?

Thanks for the assist!

Swappable element cloning bug

When using the swappable example, it is possible to produce some unexpected behaviour. Check out the video for example:

https://drive.google.com/file/d/0B19eJag7Bq_FUDk3NGREdUZuSVE/view

• Swap an element to container B and back to container A
• Move the element through the container A
• Container B's element magically updates to clone the last switched element within A

Touch event issues duplicate elements

Problem

Currently touch events are freezing up due to the nature of Sortable, Swappable and Droppable. Draggable itself is not affected as it does not move the source/target element around while dragging.

The spec says that touch events (touchstart, touchmove, touchend/touchcancel) keep dispatching touch events on the original TouchEvent.target, which means when you remove the active target from the DOM between touchstart and touchend, no touch events should bubble in the DOM.

In draggables case the original target is not completely removed or replaced, but instead just moved around in the DOM with the same reference. This seems to sometimes freeze up touch events, i.e. no touchend or touchcancel is called at all, so there is no way to clean up the mirror gracefully.

Currently we can’t find a good fix for this issue as we want to move the source/target element as you drag. And I don't seem to be able to find a browser bug or documentation around it, which baffles me.

Some potential fixes:

• Queue up DOM manipulations and execute in a different frame than the touch handlers
• Attach touchstart on draggable elements (rather than container) and attach touchmove, touchend and touchcancel after the first touchstart fired, so events should fire even when not attached to the DOM

We are working towards a fix and will close this issue once resolved

Some resources on Touch events:

• https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
• https://w3c.github.io/touch-events

Ability to select where the mirror is attached?

Is it possible to chose where the mirror element will be attached? Currently it appears like the mirror is appended to the body. The style of my draggable element is lost once it is appended to the body, and duplicating the style structure for the mirrored element is less than ideal.

Thanks.

IE11 and Edge dragging item scrolls container/page when it's scrollable

I'm encountering what I think is unexpected behavior in IE11 (11.576.14393.0) and Microsoft Edge (38.14393.0.0) on mobile. I know full compatibility with IE11 and Microsoft Edge is still in the works, but I thought I'd share my findings so that if there is a fix, it can hopefully be incorporated in the first stable release. :)

In order for Draggable to work in IE11 and Edge, I'm using the following polyfill from babel: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js

The Issue
On a tablet, when I tap on a table row and then attempt to slide up or down to reorder it, the container or browser window - if there's a scroll bar - would end up scrolling versus on desktops where once a draggable row is clicked, even if the container is scrollable it doesn't actually scroll when the row is reordered.

Desired Behavior
I think the desired behavior would be to freeze page and container scrolling when a draggable item is tapped and essentially "enabled" for dragging, because if the page or container is allowed to scroll when a use slides up or down, it makes it hard to reorder, etc.

Example
Link: http://jsfiddle.net/comradejohnny/pjofjg1h/7/

In this fiddle, you'll notice that the table has a scrollbar. On desktops, when you click on a row, then move to reorder, all works well with no issues - the table doesn't scroll. But in IE11 and Edge, the table would scroll. And while sometimes the row does reorder, the fact that the table scrolls at the same time makes it hard to reorder the actual rows.

Webstite too beautiful

Hello,

I have never seen a tech product's website that's more beautiful than draggable !

The colors are too good.

The examples are too cool.

The custom cursor is too gorgeous I wish I had it on windows.

The design is too original.

The barre you set is too high !!

Publish source code for project homepage?

It looks like the index.html and other assets in the gh-pages branch are minified/built files, generated from some other source. In the absence of an official set of examples, it'd be great to be able to view source for the home page as a live example of how Draggable works.

Provide playground examples

The README has code snippet examples, it should also include a link to a set up playground of that example for the user to try out with actual code.

Any of these sites should be fine:

• http://codesandbox.io
• http://jsfiddle.net
• http://codepen.io
• http://webpackbin.com

Drag events supersede click events

Bug, documentation issue, user error?

I have an element that may become 'active' if clicked by the user. I also want to allow that element to be draggable. Currently, it seems that drag events are superseding click events (and in this case, impedes them, regardless of binding order). It's essential to my user experience that click events precede drag events. I'm guessing this isn't an edge-case.

iOS 11 drag item gets stuck

In the "Basics" section, I moved the green and purple box to the lower left hand set of blocks, then tried to move the red and purple block from the top just a little bit, and it got stuck on the page.

Typo in website

Should be too*.

TypeError: Cannot read property 'children' of null

Using a basic implementation of Sortable, I get the following errors thrown continuously as I drag my element around the page. Although it throws nonstop errors, the drag/drop/sort does function correctly.

Environment

• OSX 10.12.6
• Chrome Version 61.0.3163.100 (Official Build) (64-bit)

Error

sortable.js:117 Uncaught TypeError: Cannot read property 'children' of null
    at c (sortable.js:117)
    at a.value (sortable.js:83)
    at a.value (draggable.js:173)
    at a.value (draggable.js:273)
    at a.value (draggable.js:370)
    at g.value (sensor.js:19)
    at g.value (mouse-sensor.js:85)
c @ sortable.js:117
value @ sortable.js:83
value @ draggable.js:173
value @ draggable.js:273
value @ draggable.js:370
value @ sensor.js:19
value @ mouse-sensor.js:85

Simplified Markup

<draggable-container>
  <div ng-if="$ctrl.ready">

    <device-group>
      <button class="drag-handle">
        <i class="fa fa-bars"></i>
      </button>
      <!-- contents item 1-->
    </device-group>  

    <device-group>
      <button class="drag-handle">
        <i class="fa fa-bars"></i>
      </button>
      <!-- contents item N -->
    </device-group> 

  </div>
</draggable-container>

Javascript

let $container = $('draggable-container');
let inst = new Sortable($container, {
  draggable: 'device-group',
  handle: '.drag-handle',
  delay: 200
});

Not Working on Sortable

I am trying to write a Hello World Example on Draggable. However, my example do not work. The bellow is my source codes.

index.html

<!doctype html>

<html>
	<head>
	    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bin/app.bundle.js"></script>
	</head>
	
	<body>
		<ul>
		  <li>Coffee</li>
		  <li>Tea</li>
		  <li>Milk</li>
		</ul>

	</body>

</html>

app.js

import {Sortable} from '@shopify/draggable';

$(function(){
new Sortable(document.querySelectorAll('ul'))
  .on('sortable:start', () => console.log('sortable:start'))
  .on('sortable:sorted', () => console.log('sortable:sorted'))
  .on('sortable:stop', () => console.log('sortable:stop'));

});

Bug: Export Snappable/Collidable Behaviors

Labeled this as a bug - hopefully that's correct.

Right now the documentation refers to Snappable and Collidable as exported constructors but the index.js does not export them. Consequently, attempting to import them from the package yields undefined.

I'm preparing a pull request for this now.

Would this work with trello style lists?

Here's an example of what I'm trying to make. Would you guys like to try building this in Shopify / draggable as an example maybe?

https://www.youtube.com/watch?v=K389QWUp4zo

https://codepen.io/TylerL-uxai/full/ZJqwXR/

first example does not seams to work.

hi, this tool looks very great. made by fellow Montrealers?

I was trying draggable with the simple implementation I could. when running it, I get the Draggable object defined, but <li> element are not draggable and, more importantly, I do not get any form of feedback like an error.

See sample implementation

https://github.com/pywebdesign/shopify-draggable-sample

Hope I didn't just miss something!

<3