Call updatePosition in onDrag

[mididev]

I want to implement a custom snapping to certain element borders, for resizing as well as for dragging.

Resizing works like a charm since I just need to call...

newWidth = this.snapX(x) - position.x;
this.rnd.updateSize({ width: newWidth, height: newHeight });

...in onResize and the size gets overwritten.

But I can't achieve the same thing for dragging, because this.rnd.updatePosition(...) in onDrag has no effect.

I tried several (dirty) things (e.preventDefault(), calling updatePosition after time interval) and looked into the Draggable code, but I couldn't find a way that works.

Does anybody have a solution for this?

[sajadghawami]

i did the same thing, and had simliar problems. I solved it by using:

onDragStop = (e, ui) => {

}

You can use this.rnd.updatePosition in there without a problem.

[mididev]

Thanks for your answer!

Yes, that's true and works quite well. But like that the UI feeling isn't really intuitive because like that for resizing I get an instant snap-to-the-grid feedback while dragging (resizing), but for dragging (onDrag) it only snaps when dragging is over :-/

I'm sure there is a way to do it but haven't found it so far. Would be very grateful if someone had an idea!

[sajadghawami]

i get your point, and had the same issue, because i needed customizable and multiple grids. So, i ended up doing the same for resize, keeping the logic in

onResizeStop = (e, ui) => {

}

Thus having the same UX for both dragging and resizing.

hope this helps :)

[mididev]

It's a possibility, but I definitely need live snapping.

Now I found a way that works (although it's a nasty hack) great so far:

I dived into react-draggable (which react-rnd uses for dragging) and injected this code in the onDrag method:

if (this.snapX) {
    newState.x = this.snapX(newState.x);
}

Now I can go to my componentDidMount method and write this:

this.rnd.draggable.snapX = this.snapX.bind(this); // or without binding if using arrow function

Thereby I can now write a custom snap calculation function that allows setting the position while dragging.

I know this is not a clean solution, but it's the only way I found to make it work. Maybe it's worth making a feature request or a PR at react-draggable @github to add a prop for a custom snapping callback. Then react-rnd could add it and everything would be fine...?

[bokuweb]

@mididev Could you please try position props on v7.1.0? If you can not solve this issue, please provide example on webpackbin https://www.webpackbin.com/bins/-Ku4nRhImIfnt9N08lGu.

thanks

[dubravcik]

@bokuweb I tried it with position property and it doesn't work. Looks like this.rnd.updatePosition() doesn't work properly in onDrag() but it works in onDragStop(). https://www.webpackbin.com/bins/-KvSorX3JvYyXLcsYCVO Thanks

[arnauddb]

Any news ?

[vikttorr]

+1 for snapping functionality described above. Would be great!

[postgetme]

same problem

[justswim]

Really need this as well. Any update here @bokuweb ?

[pahen]

Would love to see this working too! :)

[justswim]

For anyone who is stuck on this ... here's a UX work around that worked for me:

Instead of trying to get my layer to snap while dragging, what I did was show snap-to guides whenever the layer was within the snap area. Then, when the drag finished, I updated the position of the layer to the snap guides. So, the layer still doesn't snap while dragging, but it snaps immediately after dragging, and the user is aware of this because of the guides that show up.

I realize this doesn't actually solve this bug but it might work as a UX approach to solve this problem.

[mhsdevus]

+1 Basically this component doesn't seem to facilitate certain domain-specific behaviors (and fixes) that some of us need to implement. Currently stuck with UX workarounds similar to @justswim has described.

[Dror-Bar]

I have a different use case, but my solution might be useful to someone.

[llccrr]

I'm trying to achieve the same behavior than @mididev Indeed, in order to be able to build some custom behavior it would require updatePosition() to work in onDrag()

[excal1bu7]

is it still relevant? me is too faced this problem when trying to handle custom position via updatePosition on onDrag event.

[excal1bu7]

i've found a little solution. in my case i have to stop Drag when drag reached specific coordinates to reach this behavior i return false in onDrag callback.

Don't know why it's not described in docs... 🤔