Draggable: Changing width in sortable

[JCA42]

Hey guys,
first of all thanks for the great plugin, really happy that I found a drag&drop plugin working great on mobile and desktop :)

I'm using the sortable "part" of your package for a simple list, the problem is that the width of the list elements is set with width: 100%, necessary because the width of the list is changing. Now the problem is that when clicking on an item to drag it, the mirror elements gets way too big as you can see in the image below

I think the problem is that the position of .draggable-mirror is set by position: fixed, as a result, width is set relative to the whole document, so 100% off the screen. Is there any solution to handle this?

[beefchimi]

@JCA42 Thanks for the kind words 😄

The effect you are after should be solvable using the constrainDimensions prop on the mirror. Take a look at one of the Sortable Examples provided in this repo:

https://github.com/Shopify/draggable/blob/master/examples/src/content/Sortable/SimpleList/index.js#L16-L18

You can read more in the README for the Mirror:

https://github.com/Shopify/draggable/blob/1c21f18ca165383ca25ff96023de3a6583714fcb/src/Draggable/Plugins/Mirror/README.md

Apologies if this hasn't been made more clear... we are planning to invest more time into our documentation post-beta5.

Please let us know if this solves the problem!

[JCA42]

Yes, that was the parameter I was missing, thanks :) 👍