Offsets are wrong when container is scaled

[Cristy94]

How to reproduce:

1. Go to the basic demo page: http://clauderic.github.io/react-sortable-hoc/#/basic-configuration/basic-usage?_k=jtwbel
2. Apply transform: scale(0.3); on the scrolling container, Showcase__style__list Showcase__style__stylizedList.
3. Try dragging, all offsets are wrong now.

The main issue is that the drop index (mouse position) seems to be wrong now.

I understand that the dragged item scaling is wrong because it's in a different container but I would expect the mouse (drop index) to be correct.

[Cristy94]

One important issue in my case was that I was using span for the SortableList and SortableItem. Switching it to div fixed a lot of issues.

That being said, I still have the issue mentioned above, where scaling a parent container leads to wrong positions when sorting.

[adrianhelvik]

Same here. Not a major issue for me, but a minor annoyance. What about adding support for a prop named scaleFactor?

[Cristy94]

I personally fixed the issue by inserting some top-level CSS rules every time the page is resized (because my scale factor is based on window size).

I made this to add the transform ratio of my sortable element .row, based on the given ratio. If this is called multiple times it will change the existing tag.

functon updateSortableScaling(ratio) {
        const style = `.sortableHelper .row { transform: scale(${ratio});}`;
        if (Main.SORTABLE_STYLE_TAG && Main.SORTABLE_STYLE_TAG.childNodes.length > 0) {
            Main.SORTABLE_STYLE_TAG.childNodes[0].textContent = style;
        } else {
            const styleTag = document.createElement('style');
            styleTag.appendChild(document.createTextNode(style));
            document.getElementsByTagName('head')[0].appendChild(styleTag);
            Main.SORTABLE_STYLE_TAG = styleTag;
        }
}

[tomer-dev]

Contributing the issue by repeating what others have said -I could see that it is the drag helper class that is insensitive of the scale. (example - browser's zoom in/out).

Please correct me if I'm wrong or have further suggestions on the matter.

[yairopro]

@tomer-dev I cannot confirm if the issue happens for the browser zoom. But I can confirm that it happens when using transform: scale css.

In the project I work, we use a js automated transform-scale, applied on the react root element, in order to match the design when the app width is below/above the min/max expected width.