Difficulty when transforming grid and position

[Bewinxed]

Thank you for this library

I’m trying to make a CSS grid where people can drag widgets around, I’m storing each widgets dimension and coordinates and when generating the grid I populate each widget position and span Using these values.

I’m using use draggable on the widget div, I’m using the grid option with the same cell size in order for the drag snapping to match.

And using the transform property to Modify the grid row and the grid column.

The problem is that when I drag something the first time it's fine, but when I drag it the 2nd time, the offset starts from the last offset instead of 0.

How can I mitigate this?

Thanks!

[PuruVJ]

Can you reproduce this bug on something like Svelte REPL/Stackblitz?

[santiagopuentep]

I found the same issue when I was modifying the library. The internal offset is not clear what it represents and I think there's a calculation error when returning the value after the second drag.

[laotala828]

First, thank you for this library!

I am facing the same issue. I am mimicking the iOS drag from edge gesture - I will let users drag a page, if the offsetX is smaller than screenWidth/2 when drag ends it will bounce back. For example, if the screen width is 400, and the first drag ends at offsetX=100, the page will bounce back as expected. If I try a second drag, the offsetX will start from 100 instead of starting from 0.

Screen.Recording.2023-06-08.at.19.11.21.mov

[cmjoseph07]

@PuruVJ

Found hacky workaround to this issue, simply reset position and do not try to translate/transform to get back to default position. Seems to work fine this way.

let dragOptions: DragOptions = {
		bounds: '.draggable-boundary',
		position: {x: 0 , y: 0},
		onDragEnd: ({ offsetX, offsetY, rootNode, currentNode }) => {
      const dateAtPoint = calendarInstance.dateFromPoint(lastMousePosition.x, lastMousePosition.y);
			console.log(currentNode)

			if (dateAtPoint === null) {
				dragOptions.position = { x: 0, y: 0 };
			}
    },
  };

[BraveDevelopment]

Is there a fix in the work? Because this bug makes the whole library useless for me. 😞