Transform element dragged from another dnd zone

I’m trying to find a solution to transforming a dragged element once it enters another dnd zone of the same type, is that something the current API of svelte-dnd-action can address? Because I can’t figure it out. transformDraggedElement seems to only be called from the originating dnd zone and can’t differentiate when the element enters another dnd zone (can it?).

To further explain the use-case for this, I have:

1. A grid of photos which is a dnd zone (to rearrange items)
2. A list of galleries which is a dnd zone (to rearrange items)
3. Individual galleries in the list of galleries are also a dnd zone with the same type as the grid of photos, so I can drop photos into the gallery list to move them to that gallery

What I want:

• To transform a photo when it is dragged over a gallery item, to show it can be moved/dropped there.

Video demonstrating what I mean:

https://user-images.githubusercontent.com/6374876/193975018-159e581e-968b-4b15-9af6-00585a0623e2.mov

[isaacHagoel]

After sleeping on it i think that it might make sense to call transform even when morph is disabled. Can you please explain again why you needed to disable morph but still want to call transform?

[isaacHagoel]

Alright. Feel free to make a PR, otherwise I’ll try to make time for it next week

On Sun, Oct 16, 2022, 12:32 Madi @.***> wrote:

For two reasons:

a) The primary dropzone (gallery of images) needs morph disabled for UX reasons, automatic morphing results in a janky user experience as the dragged element resizes while getting dragged around a masonry style grid (I’m using a custom shadow element to show the resulting placement instead, which is much cleaner in my app)

b) The secondary dropzone (gallery list item) doesn’t have anything to automatically morph to, its items are effectively hidden and it just acts as a bucket that can swallow up images from the gallery. I’d like to call a custom morph (transformDraggedElement) to show that behaviour instead, eg: on drag over change dragged element preview to “move to gallery” label or something

In general I feel like automatic morphing (morphDisabled: false) is fine for basic use cases, but there are use cases where you’d want to disable that default transformation, while applying your own custom transform ( transformDraggedElement). You can always explicitly have both enabled if you want a morphing baseline.

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