Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to get coordinates of drop event #584

Open
olegpolin opened this issue May 29, 2024 · 24 comments · May be fixed by #585
Open

Unable to get coordinates of drop event #584

olegpolin opened this issue May 29, 2024 · 24 comments · May be fixed by #585
Labels
enhancement New feature or request

Comments

@olegpolin
Copy link

olegpolin commented May 29, 2024

On a finalize event, the event doesn't seem to have event.clientX and event.clientY properties, to get the coordinates of the element where it is dropped.
The closest I could find is event.target.clientLeft and event.target.clientTop, but they are always 0, it seems to be the width of the border.
I am attempting an implementation with svelteflow:
https://stackblitz.com/edit/svelte-dnd-action-svelteflow

@isaacHagoel
Copy link
Owner

I cannot access the link.
In general if you want to make a PR that adds the coordinates as part of the info the event, I am fine with that

@isaacHagoel isaacHagoel added the enhancement New feature or request label May 29, 2024
@olegpolin
Copy link
Author

I cannot access the link.

Oops, looks like stackblitz broke. It should work now: https://stackblitz.com/edit/svelte-dnd-action-svelteflow

@isaacHagoel
Copy link
Owner

isaacHagoel commented May 30, 2024 via email

@olegpolin
Copy link
Author

Just the coordinates
I believe I can cancel the drop animation by setting flipDurationMs to 0.

@isaacHagoel
Copy link
Owner

isaacHagoel commented May 30, 2024 via email

@olegpolin
Copy link
Author

I'm not sure what the best way to add that is, maybe dispatchFinalizeEvent should be changed?

If anyone has any ideas on this feel free to share

@isaacHagoel
Copy link
Owner

isaacHagoel commented May 31, 2024 via email

@isaacHagoel
Copy link
Owner

@olegpolin I created #585. It's just a draft. Can you grab the branch and make sure it works for you?
In the finalize event you will have e.detail.info.dropMousePosition

@olegpolin
Copy link
Author

I can't install the package from the branch to test it out, but it looks good

@isaacHagoel
Copy link
Owner

isaacHagoel commented Jun 3, 2024 via email

@olegpolin
Copy link
Author

npm link doesn't work, there is an error [vite] Pre-transform error: Failed to resolve entry for package "svelte-dnd-action". The package may have incorrect main/module/exports specified in its package.json..
Changing the files in node_modules doesn't work either

@isaacHagoel
Copy link
Owner

isaacHagoel commented Jun 4, 2024 via email

@olegpolin
Copy link
Author

Sorry I don't know what the problem is, I just tried again and got the same error [vite] Pre-transform error: Failed to resolve entry for package "svelte-dnd-action". The package may have incorrect main/module/exports specified in its package.json.

@olegpolin
Copy link
Author

Maybe someone else for whom npm link works can clone the stackblitz and test it out

@demanzonderjas
Copy link

Thanks for all the work on the package Isaac!

I looked into it via npm link, and the mouse position resolves as expected. Although it currently seems to share the mouse position relative to the page. Is it possible that it shares the position of the dragged element, relative to the dropzone (or just the x/y within the drop zone).

This would make it possible to start in a flex container for instance, be dropped in a absolute positioned container, and use the x/y position from the finalize event to set the top/left props of the dragged element, making it 'stick' where you drop it.

If there is a different workaround for this, then I would be happy to learn also :)

@isaacHagoel
Copy link
Owner

isaacHagoel commented Jul 25, 2024 via email

@demanzonderjas
Copy link

Sure: https://svelte.dev/repl/464580415b954b7b80a2c2d7b19b2b5e?version=4.2.18

I have hardcoded one mouse position as an example. I want to label an image using labels coming from the flex container and then using the final mouse position (relative to the dnd/image container) as the drop location for the dragged element. It should therefore stick there via position absolute. Normally you would use something like the mousemove/mouseover event listener within the container, but this does not work since the mouse is holding the dragged element.

I think this use case is pretty useful for all sorts of problems/solutions, so it would be awesome if this relative final mouse position could be shared. If you have a different approach, feel free to let me know also. Thanks!

@isaacHagoel
Copy link
Owner

isaacHagoel commented Jul 26, 2024 via email

@demanzonderjas
Copy link

@isaacHagoel that worked out, thanks!

Ended up using the following:

const targetElement = document.getElementById(`item_${e.detail.info.id}`);
const elementOffset = { x: targetElement.clientWidth / 2, y: targetElement.clientHeight / 2 };

const { top, left } = imageWrapperElem.getBoundingClientRect();
const targetPosition = {
	x: latestPosition.x - left - elementOffset.x,
	y: latestPosition.y - top - elementOffset.y
};

where latestPosition is the absolute mouse position tracked via the mousemove event. Connected that position to the item and voila, it works.

There is one small 'glitch' that remains and that is that you see 1 frame where it moves to the top corner (no position), and then instantly moves to the given target position, positioned absolutely.

@isaacHagoel
Copy link
Owner

isaacHagoel commented Jul 26, 2024 via email

@demanzonderjas
Copy link

demanzonderjas commented Jul 26, 2024 via email

@isaacHagoel
Copy link
Owner

just a thought: one way to trick the lib would be to render the shadow element (the one that the lib gives you in the items array in the consider and finalize callbacks) in the same position that the element would be in if dropped. that way there will be no jump when it is dropped.

@vyconm
Copy link

vyconm commented Dec 2, 2024

this feature would be excellent! Can we merge it into the main branch? :)

@isaacHagoel
Copy link
Owner

@vyconm I was going to merge it per your request, but realised it needs some more work: rather than dropMousePosition it needs to be just mousePosition and be passed to the consider event as well - in order to keep DNDEvent a single, consistent type that's easy to work with. Also I need to update the README, typings etc.
I should be able to get to it this week but if you have time before I get to it, feel free to raise a PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants