The functionality is working fine in safari, edge, and chrome, the problem is only with firefox.
I'm using react-sortable-hoc react library to sort the images in grid layout but in firefox the grid layout sorting works weird...
Please test the problem here: https://codepen.io/cristobalchao/pen/JqOpEZ
What's the problem: I'm trying to set flex-wrap: wrap; and this is causing the problem of user interaction(when a user tries to sort the image (drag and drop), on click the image sticks with mouse and even if user releases the click the image is still stuck with the mouse. user need to click again to release the image)
what should happen: User should be able to drag and drop the image by simply click and hold the mouse, drag to another position and release the click. (this works in other browsers except for firefox)
Ref: https://clauderic.github.io/react-sortable-hoc/#/basic-configuration/grid?_k=5255hk the same is working here, if I do inspect and use wrap. just inspect element apply the below code to parent container to wrap the children in grid layout
display: flex;
flex-wrap: wrap;
}
actually, the problem was to assign pointer-events: none to the parent container.