React-sortable-hoc: Drag&Drop glitch in grid type container.

[iv10]

Hi, everyone.

I have a problem using the grid type sortable container with Firefox 52.8.0 (64-bit) though it works better in "Chrome 65.0.3325.181 (Official Build) (64-bit)"

On the picture you can see how I drag the "Part 4" from the bottom of the page to the area between "Part 0" and "Part 1". As you can see there are 2 problems. First one being the text of "Part 3, 2 and 1" being highlighted as though I've selected it via cursor and the second one is that the textual content of the "Part 4", which is being dragged, gets aligned to the left up until the moment when the part is dropped in a given location. Then it looks centered again.

This latter problem with the text alignment happens also in Chrome but the former one exists only in Firefox. I use "react-sortable-hoc: ^0.8.3" in my "package.json" with a ReactJS project (^16.4.1).

PS. I use axis="xy" pressDelay={500} as props.

Do you have any ideas on how I can solve it? Thx.

[blakewilson]

Did you end up resolving this? I am experiencing the same issue, however mine is a flex container.

[iv10]

Did you end up resolving this? I am experiencing the same issue, however mine is a flex container.

Hi. I managed to solve the first problem, can confirm that this works to solve the "highlighting" problem.

1. Define this in a Hoc.css file
.noselect {
-webkit-touch-callout: none; /* iOS Safari /
-webkit-user-select: none; / Safari /
-khtml-user-select: none; / Konqueror HTML /
-moz-user-select: none; / Firefox /
-ms-user-select: none; / Internet Explorer/Edge /
user-select: none; / (yes, no hyphen) Chrome and Opera */
}

2. Put a 'div' around your sortable component with a 'noselect' class:

3. Import this CSS in a file, where you've wrapped a div around your SortableComponent.
import './Hoc.css'

This should make everything under that "div" (including the sortable grid) "unselectable".

[trickreich]

In my opinion this should be solved by this library.
Any news on this so far?

[JingyuZ]

I also run into this issue on Safari, using what @iv10 posted up there fixed it. I feel like the library should take care of this too.