Draggable: Unable to cancel a sortable:start event properly

[decademoon]

v1.0.0-beta.3
Chrome 61.0.3163.100 macOS

https://jsfiddle.net/jpfj2gd8/

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

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

sortable.on('sortable:start', e => {
  e.cancel();
});

I am trying to disable sorting my list in certain situations (when an item is being edited, for example). I have tried the above code, but the sorting still occurs (except the mirror wasn't created). After dropping an item I get an error in the console:

Uncaught TypeError: Cannot read property 'removeChild' of null

You can reproduce by running the above fiddle.

Is this a bug or am I just not doing it right? How do I temporarily disable sorting of my list?

[tsov]

@decademoon thanks for the report 👍 yes, this is definitely a bug! Looks like we aren't resetting the dragging state when drag:start gets canceled. I just pushed a fix to the v1.0.0-beta.4 branch for the next beta release. Here the commit if you are interested: https://github.com/Shopify/draggable/commit/f030a138c7f0699d3caafa5443d2f3e0f3d18096

I'll close this once we release the next beta

[tsov]

Oh and if you need a workaround until the next release, you could do something like:

sortable.on('sortable:start', (sortableEvent) => {
  sortable.dragging = false;
  sortableEvent.cancel();
});

[decademoon]

Thank you for the quick fix!

[tsov]

This has been fixed with the latest release. Thanks for reporting