can't control dragged div

[Zulfia73]

I I can't understand, how controlling dragged element

[JakeSidSmith]

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.

[Zulfia73]

@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 ; }

[JakeSidSmith]

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;
}

[Zulfia73]

@JakeSidSmith

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

[JakeSidSmith]

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.

[Zulfia73]

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

[JakeSidSmith]

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.

[Zulfia73]

@JakeSidSmith nope, problem not in flex

[Zulfia73]

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

[JakeSidSmith]

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?

[giricgoyal]

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.

[giricgoyal]

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

[giricgoyal]

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

[JakeSidSmith]

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).

[giricgoyal]

@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.

[Pickra]

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

[JakeSidSmith]

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.