Enhancement Request: Support for Dropping Items onto Other Items to Create a Parent-Child Relationship

[Adkaros]

Hello!

I am currently using svelte-dnd-action in a project and it has worked pretty well for my use case thus far. However, I want to implement a feature but the existing functionality doesn't seem to support what I'm looking to do, and I'm seeking guidance or considering adding a potential enhancement to the library, but seems like it may be more trouble altering the original scripts than it's worth

Current Behavior:
Currently, when dragging an item in a list, the other items adjust (slide under or above) to make space for the item being dragged, which works great for reordering items within the same list or moving them to different lists.

Desired Behavior:
I'm looking to implement functionality where an item can be dragged and dropped onto another draggable item, not just into the space between items. The goal is to create a parent-child relationship between items (similar to a tree structure) when one item is dropped onto another.

Some examples of this behavior would be similar to the hierarchy in programs like playcanvas, unity3d, etc.

I'm basing my implementation off of this example which gets me most of the way
https://svelte.dev/repl/fe8c9eca04f9417a94a8b6041df77139?version=3

Just wondering if anyone has implemented this or if there is a built in way to support this, thanks!

[isaacHagoel]

What is missing in the example of nested containers that you linked to?

…

On Fri, Jan 19, 2024, 09:35 Adkaros ***@***.***> wrote: Hello! I am currently using svelte-dnd-action in a project and it has worked pretty well for my use case thus far. However, I want to implement a feature but the existing functionality doesn't seem to support what I'm looking to do, and I'm seeking guidance or considering adding a potential enhancement to the library, but seems like it may be more trouble altering the original scripts than it's worth *Current Behavior:* Currently, when dragging an item in a list, the other items adjust (slide under or above) to make space for the item being dragged, which works great for reordering items within the same list or moving them to different lists. *Desired Behavior:* I'm looking to implement functionality where an item can be dragged and dropped onto another draggable item, not just into the space between items. The goal is to create a parent-child relationship between items (similar to a tree structure) when one item is dropped onto another. Some examples of this behavior would be similar to the hierarchy in programs like playcanvas, unity3d, etc. I'm basing my implementation off of this example which gets me most of the way https://svelte.dev/repl/fe8c9eca04f9417a94a8b6041df77139?version=3 Just wondering if anyone has implemented this or if there is a built in way to support this, thanks! — Reply to this email directly, view it on GitHub <#537>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC724MENRBVBSI5QBGTYPGPS3AVCNFSM6AAAAABCBA6J4WVHI2DSMVQWIX3LMV43ASLTON2WKOZSGA4DSMJXGA3TGMQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[Adkaros]

Hi Isaac - I'll post a screenshot to better demonstrate

So in this screenshot - I'm dragging node2 (screenshot hides cursor so might be hard to discern), and I would like to be able to drop node2 onto node3 (where the red outline is that I drew), and on mouseUp, it would add node2 to node3's drop zone.

Let me know if that makes sense, thanks for the quick reply!

[isaacHagoel]

In this image node3 already has items9-12.
you can drop node 2 into it like this

what am i missing?

[Adkaros]

Hey Isaac,

So I know that it's possible if you drag node 2 into the drop zone area of node 3, but I want to be able to do the same thing, by dropping the item literally on node 3's label, not in the zone below it's name.

Hopefully this helps illustrate what I'm trying to achieve - in playcanvas, when dragging an object into another object, you can drop the object on the desired parent, then it will automatically be placed into the parent as a child

[isaacHagoel]

I see. Maybe this would be possible with some html/css trickery without any enhancements. From the lib's perspective the container that has use:dndzone is the drop area and its direct children are the items.
This means that if the title can appear within that container without being its child (e.g. it can be a "sibling" that is posiiton:absolute to appear as if it is inside and there can be padding:top in the container to account for that) it will work as you describe.
@Adkaros Do you want to give something like that a try?

[Adkaros]

enhancementdemo.mp4

Hey Isaac,

Good suggestion - I did manage to get functionality similar to what I described by using absolute position on the label item, and having the section be the encapsulating container.

I attached a video above of what I have currently. I was just wondering - do you have any tips of how to debug where the shadow item is appearing? in the video you will see when I start the drag interaction with an item, the item below it instantly rises to be behind it.. instead of the expected behavior - which is having a shadow item take the place of what I'm currently dragging so that everything stays in place when you start the dragging mechanism. If my explanation is hard to follow - you can see it happen right at 0:08 in the video.

Just wondering if you have any ideas of how to possibly fix this and what scripts might have what I need to start there, I put in a pause debugger statement and it showed that the shadow element is ending up in the child container of the parent item that moved behind the dragged item.. which makes sense, just wondering why no shadow element got created on the root level. Maybe it's related to the addition of adding absolute to the label.. I removed that and it seems to mostly work, but then I lose the container functionality that I want.

Thank you for the help!

[isaacHagoel]

Are you referring to what happens at 0:09 in the video?
Ideally please make a REPL reproducing it. It would make my life way easier :)

[Adkaros]

Yeah, it happens precisely at 0:08, when I drag the media item, the items below it instantly slides behind it. I would expect that a shadow item would be created where I started dragging the item, but instead - the shadow item ends up inside of the children of the zone that slide up behind the dragged element.

I want to create a REPL but I'm just not sure what's causing this behavior,

Only thing I can think of is maybe because I don't use numbers in my IDs/keynames in my top level nodes object, but they're unique ids so not sure if that should be an issue. I saw another issue here Which seems like it might be related - as you mention about the items jumped up in a strange way, possibly relating to problems with the list being re ordered elsewhere in the application.

one other note is that in my consider event (same scenario as video), e.detail.items does show the shadow placeholder in the right spot

Anyway - I know this isn't ideal, but wondering if you can provide any tips for debugging the shadow item and why it doesn't show up on the when I drag that item at 0:08 in the video. Thanks.

[Adkaros]

So it seems like I fixed it by explicitly setting the min-height of the top level elements, which previously had unset height... though it seems like the crazy nesting works without explicit height so not sure why it solved it.

Screenshare.-.2024-02-08.2_00_38.PM.1.1.mp4

Though that worked, I seem to be facing 2 other issues

• When dragging a list item over another list item at the top level (ie. not a child item), it will sometimes focus and place shadow element within nested zone, but other times it just reorders instead (ie. pushes list item up instead of letting me place child item inside) (this can be seen in the video at 0:00-0:03)
• When dragging a list item from the top of the list and going below the parent item to reorder it below it, it instead places the shadow element at it's origin position.. at the top, instead of below the element, even though I dragged past the bottom of the item I'm trying to reorder it past (this occurs in video right at 0:23-0:24)

Overall it just seems to tricky to have it nicely reorder at both depths (within top level zone and child zones)... especially when trying to reorder a top level item between 2 other top level items. It of course works perfectly when disabling the nested zones, so I think the interaction there is having an issue

Any idea on where I can focus on to improve this? Right now I'm just having trouble understanding how it could think that the dragged element is being placed at the top when I clearly dragged it below another element, but not sure whereto debug that.

Thanks.

[Adkaros]

So I've created a REPL based on the crazy nesting example, you can find that here

I've reproduced the issues mentioned above, and I'll attach a video below to demonstrate with the REPL I shared

Screenshare.-.2024-02-19.2_53_27.PM.1.mp4

Issues I'm facing -

• Throughout the video - It's quite difficult to place node 2 between node 3 and node 4, I figure you could probably increase the gap between items but curious if there are any other solutions you can look of looking into here?
• at 0:15-0:16 - even though I am precisely trying to place the item between node 3 and 4, it places the shadow placeholder above node 3, I'm wondering how to fix this, it seems like it doesn't know where it is so it just assumes origin index? Do you think this is because a dead zone or something?

@isaacHagoel any advice here or places worth debugging in the package possibly? I'm a bit stumped on the issue and would really appreciate any guidance you might have!

[isaacHagoel]

Hi,
Sorry, I didn't notice the question you were asking me in your previous comments.
The key thing to understand is that the lib uses the centre of the dragged element rather than the cursor position to determine what the element is over. This is in order for the behaviour to be consistent no matter where you grab it but it can be detrimental when dealing with large items.
The solution the library proposes is the centreDraggedOnCursor option. I see that in your REPL you have set it to false.

Another improvement is to increase the gaps between the items to allow the element to be placed between them more easily without requiring pixel perfect accuracy. This could be achieved using simple css (margin, grid-gap etc). If you don't want the gaps to be there all the time you can selectively apply them only when a drag operation is taking place (using the trigger in the consider handler to set a boolean to true and the finalize handler to set it to false).

Is this helpful?