Items' UI change during dragged

[gosongying]

I am just wondering if a dragged item's UI will be changed when it is being dragged and a change to its content happens during dragging. Based on my experiment, it seems not. I am just curious. Thanks

[isaacHagoel]

Can you explain what you mean by change? The drag element is cloned from the original element.

On Mon, Sep 16, 2024, 05:42 GO SONG YING @.***> wrote:

I am just wondering if a dragged item's UI will be changed when it is being dragged and a change to its content happens during dragging. Based on my experiment, it seems not. I am just curious. Thanks

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/601, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC6MRTD6MBY7JDN7MHDZWXPIVAVCNFSM6AAAAABOIC4SNGVHI2DSMVQWIX3LMV43ASLTON2WKOZSGUZDOMJVHE3DINA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[gosongying]

May I know how the cloning works? Because my item's content is dependant on a store, is that the reason the dragged item's UI is changed when I start dragging?

[isaacHagoel]

You can easily find it in the library's code (search for cloneNode). If you make a simple REPL demonstrating the issue, I might be able to assist.

On Mon, Sep 16, 2024, 19:58 GO SONG YING @.***> wrote:

May I know how the cloning works? Because my item's content is dependant on a store, is that the reason the dragged item's UI is changed when I start dragging?

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

[gosongying]

Ok, I will send you the REPL later. By the way, may I know what is id:dnd-shadow-placeholder-0000. It seems the item being dragged will have its id changed to this.

[gosongying]

Can you explain what you mean by change? The drag element is cloned from the original element. … On Mon, Sep 16, 2024, 05:42 GO SONG YING @.> wrote: I am just wondering if a dragged item's UI will be changed when it is being dragged and a change to its content happens during dragging. Based on my experiment, it seems not. I am just curious. Thanks — Reply to this email directly, view it on GitHub <#601>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC6MRTD6MBY7JDN7MHDZWXPIVAVCNFSM6AAAAABOIC4SNGVHI2DSMVQWIX3LMV43ASLTON2WKOZSGUZDOMJVHE3DINA . You are receiving this because you are subscribed to this thread.Message ID: @.>

The cloned node is re-rendered instead of reused right?

[gosongying]

Hi, I’ve provided a simple REPL that reflects the situation in my project. While it's not an exact replica, it’s similar. My project uses Gridstack for managing child items, and the initialization of Gridstack can introduce delays in setting the full height of the items. The REPL simulates this by using setTimeout to increase the height after a delay.

The current issue is that when I start dragging an item, it might move outside of my cursor’s reach. I suspect this problem is related to the cloned item. The re-rendering of the item component takes some time, and if I drag it before the initialization is complete, the item might have a smaller height compared to the original, causing it to move away from the cursor.

Please let me know if anything is unclear. Thanks! https://svelte.dev/repl/5c98ed11789f45c0a73346b2c241f7b7?version=4.2.19

[isaacHagoel]

In this case i would suggest disallowing drag (you can use the dragDisabled prop) until everything is initialised.

On Tue, Sep 17, 2024 at 4:21 AM GO SONG YING @.***> wrote:

Hi, I’ve provided a simple REPL that reflects the situation in my project. While it's not an exact replica, it’s similar. My project uses Gridstack for managing child items, and the initialization of Gridstack can introduce delays in setting the full height of the items. The REPL simulates this by using setTimeout to increase the height after a delay.

The current issue is that when I start dragging an item, it might move outside of my cursor’s reach. I suspect this problem is related to the cloned item. The re-rendering of the item component takes some time, and if I drag it before the initialization is complete, the item might have a smaller height compared to the original, causing it to move away from the cursor.

Please let me know if anything is unclear. Thanks! https://svelte.dev/repl/5c98ed11789f45c0a73346b2c241f7b7?version=4.2.19 http://url

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

[gosongying]

I might not get it HAHA. But what I mean is actually the initialization that happens when I drag the item (ps: correct me if I am wrong that there is an initialization happens when dragging happens), is the approach you suggested applicable for that?

[isaacHagoel]

I was referring to your REPL. It does the "setup" on mount. I suggested waiting until everything is mounted. The dragged element is not a svelte element and not a child of the dndzone (it is taken out) and onMount doesn't run when drag start. you can still manipulate it using 'transformDraggedElement' or by finding it in the dom using its id.

On Wed, Sep 18, 2024 at 2:21 AM GO SONG YING @.***> wrote:

I might not get it HAHA. But what I mean is actually the initialization that happens when I drag the item (ps: correct me if I am wrong that there is an initialization happens when dragging happens), is the approach you suggested applicable for that?

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

[gosongying]

Are you saying that the dragged item will not re-mount? It will just be the copy of the original element? If yes, why it does print out the message that I put in the onMount block?

[isaacHagoel]

the original item within the list will be recreated as the "shadow item" (the placeholder in the list until the item is dropped). the dragged item is a copy

On Thu, Sep 19, 2024 at 5:26 PM GO SONG YING @.***> wrote:

Are you saying that the dragged item will not re-mount? It will just be the copy of the original element? If yes, why it does print out the message that I put in the onMount block?

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

[gosongying]

Oh, I have just realised what you were saying. Now it works totally fine, thank you so much.

[gosongying]

Just to clarify again, the original item will be re-created and put at the same place and occupy same space as it is, the dragged item is just a cloned of the original item? Is the original item being removed then?

[isaacHagoel]

The original item is replaced with a "shadow item". If you look at the code (pointerAction.js) it might help.

On Thu, Sep 19, 2024, 23:38 GO SONG YING @.***> wrote:

Just to clarify again, the original item will be re-created and put at the same place and occupy same space as it is, the dragged item is just a cloned of the original item? Is the original item being removed then?

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

[gosongying]

Hi, I've created a REPL for Gridstack items, but I'm still facing an issue: when I start dragging an item from the top, the items below it suddenly drop down and bounce back. Additionally, the dragged item sometimes moves away from the cursor. Do you have any idea what could be causing this?

https://svelte.dev/repl/c7b6cb368b7945f095eb3794656944bf?version=4.2.19

[isaacHagoel]

I'll have to read Gridstacks code in order to try to answer that. What are you using it for in your app? Which functionality?

On Sat, Sep 21, 2024 at 6:44 PM GO SONG YING @.***> wrote:

Hi, I've created a REPL for Gridstack items, but I'm still facing an issue: when I start dragging an item from the top, the items below it suddenly drop down and bounce back. Additionally, the dragged item sometimes moves away from the cursor. Do you have any idea what could be causing this?

https://svelte.dev/repl/c7b6cb368b7945f095eb3794656944bf?version=4.2.19 http://url

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

[gosongying]

I'm working on a dynamic form project, and for array types, I'm utilizing your library to manage the reordering of items. Each item is essentially a Gridstack instance, which offers a smooth UI for making its inner content draggable.

[isaacHagoel]

Actually I found an easy solution for you: use the option morphDisabled: true, see: https://svelte.dev/repl/b23b3da822c2457ea824bf6b762eb2d3?version=4.2.19

On Sun, Sep 22, 2024 at 2:54 AM GO SONG YING @.***> wrote:

I'm working on a dynamic form project, and for array types, I'm utilizing your library to manage the reordering of items. Each item is essentially a Gridstack instance, which offers a smooth UI for making its inner content draggable.

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

[gosongying]

Hi, sorry for the late reply. That is so great, I can see that the item wont go out of the cursor. However, the issue still exists. Do you have any idea on that? Thank you so much.

when I start dragging an item from the top, the items below it suddenly drop down and bounce back

[isaacHagoel]

That's not because of this lib. Gridstack probably plays with the heights. You can fix it by applying min-height to the items. I applied this solution here: https://svelte.dev/repl/b23b3da822c2457ea824bf6b762eb2d3?version=4.2.19

On Wed, Sep 25, 2024 at 1:08 AM GO SONG YING @.***> wrote:

Hi, sorry for the late reply. That is so great, I can see that the item wont go out of the cursor. However,

when I start dragging an item from the top, the items below it suddenly drop down and bounce back this issue still exists. Do you have any idea on that? Thank you so much.

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

[gosongying]

I see, thanks for you help. By the way, I notice that the item that is being dragged will have its id becoming '"id:dnd-shadow-placeholder-0000', is this expected? As I am using the id to do some logic, that string make my logic fail, is it possible to get its original id back?

[isaacHagoel]

The id changed to the shadow id for one frame if I remember correctly. It's done in order to make svelte "let go of it". How does it affect your logic?

On Sun, Sep 29, 2024, 14:38 GO SONG YING @.***> wrote:

I see, thanks for you help. By the way, I notice that the item that is being dragged will have its id becoming '"id:dnd-shadow-placeholder-0000', is this expected? As I am using the id to do some logic, that string make my logic fail, is it possible to get its original id back?

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

[gosongying]

Oh I got it. My child component has relied on the id for some reason, I have resolved it, thanks for your help!