Draggable: Docs are out of date; had to hunt on SO just to get the example code working.

[televators]

_PS: Where'd the right sidebar go? Haven't made an issue in a long time and there's no options for anything, just the MD editor and a submit button..._

Issues

Never used Draggable before, pulled through NPM according to the official docs. Installed fine. Tried this example code:

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

const draggable = new Draggable(document.querySelectorAll('ul'), {
  draggable: 'li'
});

draggable.on('drag:start', () => console.log('drag:start'));
draggable.on('drag:move', () => console.log('drag:move'));
draggable.on('drag:stop', () => console.log('drag:stop'));

...and importing isn't working. I'm not using any bundler and transpiler, just a plain JS file so this may be due to my inexperience with modern modules. Trying various things, browser was saying that there was no default export when I used import Draggable from [...]. Anyways, couldn't get import to work with Draggable no matter what I tried so I skipped to just using a script tag in the index.html.

Now that the lib was loading properly, I was just using the example code without the import statement at the top. Now, getting error Draggable is not a constructor. After searching issues here and on SO, found out that I have to use new Draggable.default(...) instead of just new Draggable(...) per the docs.

To see how the current examples are done on the site's home page, I followed the directions for spinning up the examples but they don't exist. There's no 'examples' directory and trying to run the yarn scripts fails.

All in all this has been a very disappointing foray into this seemingly promising library (by a giant like Shopify, no less). At this point I'm hesitant of even continuing since I don't know whether even 10% of the docs are up to date. I'm trying to learn this because I'm trying to make a simple drag 'n drop game for a client at work and if it goes well, it could be something we adopt within the dev team and start using it often.

Are there any plans to at least update the first page of the docs at all?

If there's anything I should alter with this issue to conform better, let me know. I don't use GH issues much.

Environment

• Library version: a1.0.0-beta.8
• Browsers: Firefox 78.0.2 (x64)
• Tech stack: On Mac; using plain old .js file, pulling draggable through npm (and imported) as well as through CDN

[bahung1221]

Thank you for reminding,
I admit that there are some confusing parts of the docs, so I will try to update it on the next weekend. 😄

For the example code, it wasn't published to NPM, so you must clone this repo to run it:

git clone https://github.com/Shopify/draggable.git

cd draggable & yarn
yarn start

[zjffun]

emm... 😕 The documentation should indeed be updated.

import { Droppable } from '@shopify/draggable';
const droppable = new Droppable(document.querySelectorAll('.container'), {
  draggable: '.item',
  dropzone: '.dropzone'
});

import Droppable from '@shopify/draggable/lib/droppable';
const droppable = new Droppable(document.querySelectorAll('.container'), {
  draggable: '.item',
  dropzone: '.dropzone'
});

<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
<script>
const droppable = new Draggable.Droppable(document.querySelectorAll('.container'), {
  draggable: '.item',
  dropzone: '.dropzone'
});
</script>

<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/droppable.js"></script>
<script>
const droppable = new Droppable.default(document.querySelectorAll('.container'), {
  draggable: '.item',
  dropzone: '.dropzone'
});
</script>