search

isaacHagoel / svelte-dnd-action

An action based drag and drop container for Svelte
MIT License
1.81k stars 104 forks source link

Listening to events in other elements #560

Open dilonhenrique opened 6 months ago

dilonhenrique commented 6 months ago

First of all, thanks for this fantastic lib! The only one that really fits most of my project's needs.

I've forked your repo and made some changes for my usecase (maybe PR in the future), but there's something confusing me: been trying to capture a mouse event in other elements (not a item nor a dropzone) while dragging and I can't.

My need: My dropzone is inside a accordeon, so I wanted to open this accordeon if the user hover its header for a while. I was thinking in, while dragging, capture the mouseover (or mouseenter, dragover, etc) event and than made the logic in this listener.

The problem is that I cant capture any of these. When I listen for those events in window object, it's fine, but not in other elements. Tryed to comment all preventDefault and stopPropagation I found, but no success.

Would like to understand what's happening and maybe have a suggestion to accomplish this.

Thank you so much!

isaacHagoel commented 6 months ago

Could it be because the mouse is already down and the cursor is over the dragged element? The lib itself checks what the element is hovering over every x milliseconds by calculating bounding rects. If you could make a simple REPL reproducing the issue, I'll have a quick look

dilonhenrique commented 6 months ago

Thanks for your quick response!

Here's the REPL: https://svelte.dev/repl/ab152d93955343439d7c2568a953668b?version=4.2.15

I think your explanation make sense. I'll run some tests here, to figure out what to do...

isaacHagoel commented 6 months ago

Hi, sorry for the delay, I got a bit sick. Do you still need my help here or do you have new findings?

dilonhenrique commented 6 months ago

Hey!

I have added pointer-events: none to my dragged element to pass events through. It worked, but seems more like a hack...

The biggest con to this, is that cursor reacts to whatever is below.

I could Track mouse move, but seemed too memory expensive. May I try this next week though. The help I would appreciate is any ideas for solution beside those.

Thank you.

isaacHagoel commented 6 months ago

I think you're spot on. if something else comes to mind i will let you know

On Sun, Apr 21, 2024 at 11:52 AM Dilon Henrique @.***> wrote:

Hey!

I have added pointer-events: none to my dragged element to pass events through. It worked, but seems more like a hack...

The biggest con to this, is that cursor reacts to whatever is below.

I could Track mouse move, but seemed too memory expensive. May I try this next week though. The help I would appreciate is any ideas for solution beside those.

Thank you.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/560#issuecomment-2067848152, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC2WVWVYTC736JNQSUDY6MLVBAVCNFSM6AAAAABGOGJBDOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANRXHA2DQMJVGI . You are receiving this because you commented.Message ID: @.***>