can't control dragged div about react-reorder HOT 17 CLOSED

@Zulfia73 : You might want to consider a different approach when you are using transform property on the parent.

from react-reorder.

What version are you using?
I looks like you have somehow overridden the position styles.
The element should have these:

var draggedStyle = {
  position: 'fixed',
  top: rect.top,
  left: rect.left,
  width: rect.width,
  height: rect.height
};

Check if there is something with !important that is affecting it.

from react-reorder.

@JakeSidSmith
file.js =>
var draggedStyle = {
position: 'fixed',
top: rect.top,
left: rect.left,
width: rect.width,
height: rect.height
};

listClass={classes.flexContainer} =>
.flexContainer {
display: flex;
flex-wrap: wrap;
width: 100%;
position: relative;
my class =>
.dragged {
background-color: #EEE ;
transform: scale(0.98, 0.98) ;
opacity: 0.7 ;
}

from react-reorder.

Looks like that position: relative; is what could be doing it. Try targetting your dragged class, which will be dragged by default.

.dragged {
  position: fixed;
}

from react-reorder.

@JakeSidSmith

On the basis what, are you made calculations for dragged?

from react-reorder.

element.getBoundingClientRect() which gives you its exact position on the page.

You must have some other style overriding it. I've never seen something like this before.

Have a look in the styles panel down the right of the inspector.

from react-reorder.

@JakeSidSmith Strange, but the problem is only with the parameter left

from react-reorder.

It could be something do do with being display: flex;. I haven't used flexbox with react-reorder at all.

It's hard to say what the solution is without having a look at the app / code.

from react-reorder.

@JakeSidSmith nope, problem not in flex

from react-reorder.

getBoundingClientRect retutn wrong left parametr
ClientRect {top: 220.5, right: 990.53125, bottom: 247.5, left: 854.53125, width: 136…}

from react-reorder.

Hey, sorry, forgot to respond to this last time.

I'm not sure the getBoundingClientRect is returning the wrong values...

In your screenshot there is something under that black box on the left side. Is that dev tools or something? Have you tried running it with that disabled?

from react-reorder.

I am having the same issue. I have the "Reorder" component in a Modal though. I don't think that should make a difference. The values getBoundingClientRect is returning seems to fine. Event the .dragged element has position: fixed. Still the element seems to be sticking at the right edge of the viewport and a few pixel below the mouse position.

from react-reorder.

So after digging in to what was causing this, the modal's (or parent's) transform property causes this bug to creep up.

from react-reorder.

Ah, @giricgoyal good catch. I ran into issues caused by transform just a week or so ago (but not with react-reorder). That is quite possibly the cause of this issue.

Frustrating that certain properties cause position: fixed; to behave differently.

Unfortunately if I were to use position: absolute; and position the items relative to their parent they would end up having overflow issues (being hidden outside, or causing the parent to scroll).

from react-reorder.

@JakeSidSmith : Unfortunately, the only solution I have found so far is to refactor the parent to not use transform properties. Would love to know whenever you have a different solution.

from react-reorder.

Thanks for the no transform suggestion @giricgoyal, totally saved me

from react-reorder.

I don't think there's another way I can resolve this besides suggesting the transform is removed (not without completely changing how this lib works anyway e.g. rendering dragged items outside of the reorder component using portals).

I'll consider this for a future version. Closing for now.

from react-reorder.