Draggable: tile got stuck while trying to solve puzzle

[victornpb]

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.

[Jeremy-Knudsen]

This happens to me too.

[pacMakaveli]

Same here. If it helps, it only happens when the I drop the draggable item in the same ( or very close ) location as the original position.

Edit: It looks like it only happens when the draggable is an image.

[pacMakaveli]

Turns out the fix is pretty simple, but not applicable in every case. Adding draggable: false to the img element stops the image from creating the native ghost image element when dragging it and allows draggable to perform well. It also speeds up movement and performance quite a lot.

However, if draggable.native is set to true, the mirror of the img element is not created anymore, but that doesn't stop the plugin from working. I might be wrong here and actually having native true doesn't create the mirror anymore, since you're using the native functionality.

[tsov]

@pacMakaveli 👋 interesting use case with img tags, this may be a problem we need to address within the MouseSensor, e.g. Canceling any potential real dragstart events on draggable elements. But it may also get fixed by adding a user-select: none; on drag:start on the document.body and remove it on drag:stop?

We added a patch for this issue in the next beta branch (v1.0.0-beta.2), so it will automatically add the user-select: none; for you: https://github.com/Shopify/draggable/commit/b07e800153ce7f79608faabbb20c3f029acfdd33

[pacMakaveli]

@tsov 👋 I already have user-select: none on my draggable elements to avoid selecting the text on page when dragging.
For me, draggable: false is the fix and it doesn't have any drawbacks since I don't use native. I'll give the beta try and let you know if there is any difference though!

[tsov]

Thanks for reporting guys 👍 our newest release should address most of your feedback, but if any bugs persist, comment or re-open

[tsov]

@pacMakaveli oh and you won't need to set draggable=false anymore, drag events are now prevented by the mouse sensor