Draggable: Draggable is not a constructor

[alscardoso]

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>

[timrourke]

@alscardoso When using Draggable in the browser like that, you'll want to use the signature new Draggable.Draggable().

Here is an example on CodePen.

[timrourke]

@alscardoso BTW, you make a good point, and I'm sure the team would be happy to consider a PR to their documentation to clarify that point for others. The example they shared is probably written making the assumption that most users would be consuming Draggable in an ES6 module context where the Draggable base class was imported, but other users are likely to bump their heads on that bit of ambiguity in the readme.

[alscardoso]

thanks @timrourke

Any idea why the list items are getting duplicated when I drag and try to swap across the list?
https://codepen.io/alscardoso/pen/eGEyyX?editors=1010

[tsov]

Thank you for triaging @timrourke

@alscardoso I have just opened an issue formalizing the touch issues a little more: https://github.com/Shopify/draggable/issues/40

[synoptase]

Just updating this for future searches, the signature new Draggable.Draggable() doesn't work on beta.4 . You'll need to use new Draggable.default().

[televators]

I just ran into this issue while starting with Draggable for the first time. Seems like the docs have been neglected for a while, which is very frustrating since this lib looks so awesome. Trying to get up to speed with it so my coworkers and I can start using it for client work.