Draggable: How to allow dragging only horizontally (x axis)

[pie6k]

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

[snalld]

I'd love to know as well!

I tried making a plugin that's a direct clone of Mirror but with the y-axis transform turned off. The good news is the plugin registered fine (I was able to log to the console from Mirror's various internal events), but nothing I changed had any effect on the actual mirror element... Thoughts?

Thanks in advance

[tsov]

Thank you for your question, definitely something we want to support 👍

I added support for the next release v1.0.0-beta.3, for now you can test it on the beta branch, or check out the changes I made to the mirror plugin: https://github.com/Shopify/draggable/commit/9a9a129df9ce9f9bb73106a5335492adf60a9c21

@snalld Nice! You would need detach the default mirror plugin and attach your custom mirror plugin instead. There is currently no obvious API to do that, but we are planning to dynamically add/remove plugins in the future

Let me know if you have any other questions.

[snalld]

@tsov Nice to know I'm not going mad haha

It'd be great to see that detach API included asap!

[tsov]

@snalld if you need to do it now you could do something along the lines of:

const mirrorPlugin = draggable.activePlugins.find((plugin) => plugin.constructor.name === 'Mirror');
mirrorPlugin.detach();

and ideally remove it from the activePlugins array.

There will be an API to support this out of the box

[tsov]

@pie6k @snalld you can now restrict mirror movement on both x & y axis. Additionally you can now add/remove plugins/sensors with the new release.

Closed via: https://github.com/Shopify/draggable/releases/tag/v1.0.0-beta.3