-
Notifications
You must be signed in to change notification settings - Fork 105
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
Comments
I cannot access the link. |
Oops, looks like stackblitz broke. It should work now: https://stackblitz.com/edit/svelte-dnd-action-svelteflow |
Looks like you would need the coordinates and the ability to cancel the
drop animation, correct?
…On Thu, May 30, 2024 at 4:48 AM Oleg Polin ***@***.***> wrote:
I cannot access the link.
Oops, looks like stackblitz broke. It should work now:
https://stackblitz.com/edit/svelte-dnd-action-svelteflow
—
Reply to this email directly, view it on GitHub
<#584 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AE4OZC4RKNWUJ5THTSHF6XTZEYPGLAVCNFSM6AAAAABIODAE4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZYGA2TGMBVGA>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
Just the coordinates |
cool. would you like to make a PR? it should be simple to add that info to
the event
…On Thu, May 30, 2024 at 11:21 AM Oleg Polin ***@***.***> wrote:
Just the coordinates
I believe I can cancel the drop animation by setting flipDurationMs to 0.
—
Reply to this email directly, view it on GitHub
<#584 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AE4OZCZOYYMLMC5B55S6C73ZEZ5LNAVCNFSM6AAAAABIODAE4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZYGUYDEMBWHA>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
I'm not sure what the best way to add that is, maybe If anyone has any ideas on this feel free to share |
i'll try to get to this during the weekend and just add the info.
…On Fri, May 31, 2024 at 10:31 AM Oleg Polin ***@***.***> wrote:
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
—
Reply to this email directly, view it on GitHub
<#584 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AE4OZC4DR4ETQMBDLOWIO2TZE7AHDAVCNFSM6AAAAABIODAE4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBRGA2DKMJWGQ>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
@olegpolin I created #585. It's just a draft. Can you grab the branch and make sure it works for you? |
I can't install the package from the branch to test it out, but it looks good |
You can clone the repo, checkout the branch and use npm link or yarn link
to make your app use the local version.
Alternatively you can copy the new versions of the files that change into
you node_modules, replacing the existing files
…On Tue, Jun 4, 2024, 03:49 Oleg Polin ***@***.***> wrote:
I can't install the package from the branch to test it out, but it looks
good
—
Reply to this email directly, view it on GitHub
<#584 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AE4OZC7KHAXPSFTUOYW3D4TZFSUCVAVCNFSM6AAAAABIODAE4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBVG44TCNBVHA>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
npm link doesn't work, there is an error |
I use linking all the time when working on the lib and other people were
able to test changes this way before. Not sure what the problem is.
If you can't test the change I can try to test it for you by making an
example on my machine using the stackblitz link you provided but not sure
when I will get to it.
…On Wed, Jun 5, 2024 at 1:58 AM Oleg Polin ***@***.***> wrote:
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
—
Reply to this email directly, view it on GitHub
<#584 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AE4OZC3SWJK5Y62ENP4HQXDZFXP2ZAVCNFSM6AAAAABIODAE4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBXHA4DQMJUHE>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
Sorry I don't know what the problem is, I just tried again and got the same error |
Maybe someone else for whom |
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 :) |
Can you make a simple repl showing what you're trying to achieve? You can
hardcode the mouse position for the sake of demonstrating it
…On Fri, Jul 26, 2024, 04:11 Daan Weustenraad ***@***.***> wrote:
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 :)
—
Reply to this email directly, view it on GitHub
<#584 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AE4OZCZ5HEORPU2M3VHUCSLZOE5UXAVCNFSM6AAAAABIODAE4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENJRGEYTOOBZGQ>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
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! |
Have you tried keeping a ref to the dndzone and calculating the relative
position using the absolute mouse position and ref.getBoundingClientRect?
…On Fri, Jul 26, 2024, 18:13 Daan Weustenraad ***@***.***> wrote:
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!
—
Reply to this email directly, view it on GitHub
<#584 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AE4OZCYH6P7GPU2VAIND7XDZOIALPAVCNFSM6AAAAABIODAE4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENJSGIYTCMRVHE>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
@isaacHagoel that worked out, thanks! Ended up using the following:
where 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. |
That's the drop animation, maybe I should add the option to cancel it
…On Fri, Jul 26, 2024, 19:36 Daan Weustenraad ***@***.***> wrote:
@isaacHagoel <https://github.com/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.
—
Reply to this email directly, view it on GitHub
<#584 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AE4OZC2SSS6W2HGEDZNJEHDZOIKDHAVCNFSM6AAAAABIODAE4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENJSGM2TIMZYG4>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Ah that would be a nice solution I think :) - gives the end user more
freedom.
Op vr 26 jul 2024 om 11:47 schreef Isaac Hagoel ***@***.***>:
… That's the drop animation, maybe I should add the option to cancel it
On Fri, Jul 26, 2024, 19:36 Daan Weustenraad ***@***.***>
wrote:
> @isaacHagoel <https://github.com/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.
>
> —
> Reply to this email directly, view it on GitHub
> <
#584 (comment)>,
> or unsubscribe
> <
https://github.com/notifications/unsubscribe-auth/AE4OZC2SSS6W2HGEDZNJEHDZOIKDHAVCNFSM6AAAAABIODAE4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENJSGM2TIMZYG4>
> .
> You are receiving this because you were mentioned.Message ID:
> ***@***.***>
>
—
Reply to this email directly, view it on GitHub
<#584 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AEOHGO5OSIJDKJJAUDMA4YLZOILKHAVCNFSM6AAAAABIODAE4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENJSGM3TGMRUHA>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
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. |
this feature would be excellent! Can we merge it into the main branch? :) |
@vyconm I was going to merge it per your request, but realised it needs some more work: rather than |
On a finalize event, the event doesn't seem to have
event.clientX
andevent.clientY
properties, to get the coordinates of the element where it is dropped.The closest I could find is
event.target.clientLeft
andevent.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
The text was updated successfully, but these errors were encountered: