the class instance is converted to a regular object

[interk0t]

Hello! I use instances of a class that has a proxy object / reactive field ($state) in which all the important information about the element in the dnd grid (column sizes, etc.) and the problem is that when calling the onconsider function, my instance of the class turns into a regular object, losing the state field, which causes errors in the markup like
item.height -

runtime.js:239 Uncaught TypeError: Cannot read properties of undefined (reading 'height')

The screenshot shows that the element that I started moving was replaced in the array from a class to a regular object, losing its state
How can I solve this without changing the structure of the element in the items array? Thanks

[interk0t]

It seems that the class is losing its constructor due to the spread operator, or the reactive state field is not copied for some reason, is it possible to add support for classes, for example, if items will consist only of classes, but it must have an id field?

function createShadowElData(draggedElData) {
return {...draggedElData , [SHADOW_ITEM_MARKER_PROPERTY_NAME]: true, [ITEM_ID_KEY]: SHADOW_PLACEHOLDER_ITEM_ID};
}

[isaacHagoel]

Not sure. Is there a way to clone the instance including all the proxies etc in a way that keep their integrity? ChatGPT says that this approach would work for most cases but notice how it is assigning the original instance properties to the new instance, seems risky to me. You can give it a try if you'd like and let me know if it works. ``` function cloneInstance(instance) { const NewClass = instance.constructor; const newInstance = new NewClass(); // Create a new instance for (const key of Object.keys(instance)) { const value = instance[key]; if (typeof value === "object" && value !== null) { try { // If it's a Svelte proxy (i.e., $state), just reassign it newInstance[key] = value; } catch { // If reassigning fails, fallback to deep cloning newInstance[key] = structuredClone(value); } } else { newInstance[key] = value; } } return newInstance; } ```

…

On Thu, Feb 6, 2025, 01:46 interk0t ***@***.***> wrote: I also understand that the class loses its constructor due to the spread operator. Is it possible to add support for classes, for example, if items consists only of classes, but it must have an id field? function createShadowElData(draggedElData) { return {...draggedElData , [SHADOW_ITEM_MARKER_PROPERTY_NAME]: true, [ITEM_ID_KEY]: SHADOW_PLACEHOLDER_ITEM_ID}; } — Reply to this email directly, view it on GitHub <#630 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC2JBFY4MLGPFI3U4H32OIP3FAVCNFSM6AAAAABWRENTI6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMZXGA2TMOBYGA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[interk0t]

Thank you! and one more question:
I have a situation in which I initially take and move an element from zone 1 and a slide with zone 2 slides over it in such a way that slide 2 completely overlaps zone 1, and then zone 2 does not respond to the placement of my element, but only the first one reacts. Is there any way to completely disable zone 1 while interacting with zone 2 (while I'm moving the element over 2 zone)? without recreate an element of 1 zone, or something like block {#key}

[isaacHagoel]

There are options that allow disabling drag or drop operations dynamically but in order to answer the specific question I need to see an example

…

On Mon, Feb 10, 2025, 14:20 interk0t ***@***.***> wrote: Thank you! and one more question: I have a situation in which I initially take and move an element from zone 1 and a slide with zone 2 slides over it in such a way that slide 2 completely overlaps zone 1, and then zone 2 does not respond to the placement of my element, but only the first one reacts. Is there any way to completely disable zone 1 while interacting with zone 2? without recreate an element with 1 zone, or something like block {#key} — Reply to this email directly, view it on GitHub <#630 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZCYOXKIATFWOJQ7RCVL2PALI7AVCNFSM6AAAAABWRENTI6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNBWHAZTCNZZHA> . You are receiving this because you commented.Message ID: ***@***.***>

[interk0t]

In the video there are 2 dnd zones - gray and purple. I take an element from the gray zone, after which a second purple zone appears on top and I cannot place an element inside it. That's the problem. Changing the disabling drag / drop parameters will, of course, do nothing, since interaction with zone 1 (gray) will continue
https://youtu.be/OrZQnl2hrzc

[interk0t]

If I only want to interact with the purple zone then it can be solved by setting dropFromOthersDisabled for the gray zone, but not for the first case

[isaacHagoel]

(hopefully I understand correctly), zones that are registered during drag don't activate during the same drag if I remember correctly. Is it possible for you to hide it but still have it in the dom and registered as a DND zone and then show it at the right time (rather than adding it to the dom)?

…

On Mon, Feb 10, 2025, 14:48 interk0t ***@***.***> wrote: If I only want to interact with the purple zone then it can be solved by setting dropFromOthersDisabled for the gray zone, but not for the first case — Reply to this email directly, view it on GitHub <#630 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZCZ6H36NKXAPC7HBWST2PAOPRAVCNFSM6AAAAABWRENTI6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNBWHA2TKMJRHA> . You are receiving this because you commented.Message ID: ***@***.***>

[interk0t]

I can’t hide it, since the visibility of the gray zone (underlying) is needed; its elements would be blurred by the background, but even if I hid it but left it in the DOM, this would not solve the problem and events would still be triggered in the gray zone instead of the purple one

I solved the problem like this: I just add the disabled class to the gray area and use the check:

 try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var dz = _step.value;

        if (dz.classList.contains('disabled')) continue;
.......

from the source code and then the gray zone does not trigger events and I can work with the purple zone, but this option makes changes to the source code, not very good

I understand that my case is very rare, but what can I do :)

[isaacHagoel]

Wait so you just want to not allow dropping to it at certain times? Why not set disableDropFromOthers to true? I am trying to assist but not looking next to a computer rn

…

On Mon, Feb 10, 2025, 17:23 interk0t ***@***.***> wrote: I can’t hide it, since the visibility of the gray zone (underlying) is needed; its elements would be blurred by the background, but even if I hid it but left it in the DOM, this would not solve the problem and events would still be triggered in the gray zone instead of the purple one I decided this way: I just add the disabled class to the gray area and use the check: try { for (_iterator.s(); !(_step = _iterator.n()).done;) { var dz = _step.value; if (dz.classList.contains('disabled')) continue; ....... from the source code and then the gray zone does not trigger events and I can work with the purple zone, but this option makes changes to the source code, not very good — Reply to this email directly, view it on GitHub <#630 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC22E7HITP4HHANHZML2PBAX5AVCNFSM6AAAAABWRENTI6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNBXGAZDQNJRHA> . You are receiving this because you commented.Message ID: ***@***.***>

[interk0t]

disableDropFromOthers won’t help because initially the element is from the originDropZone, which is the gray zone (the very first one). The disableDropFromOthers parameter only applies to all the other zones (in this case, just the purple one). What I actually need, as paradoxical as it may sound, is for the zone from which I took the element (the gray one) to stop reacting to its movement (rearranging other elements in it and looking for space for the dragged element). If you watched the video I recorded on YouTube, you’d understand what I mean.

[interk0t]

simply put, after I take my element from the gray zone, I no longer want the gray zone to react to it in any way (disable the zone altogether, but there is no such property or method)

[isaacHagoel]

So taking it out of the origin zone is irreversible (in the same operation)? Are you sure that this is the desired UX (users don't tend to like that)? Not sure how to incorporate such a feature in the lib without introducing a footgun

…

On Mon, Feb 10, 2025, 17:51 interk0t ***@***.***> wrote: simply put, after I take my element from the gray zone, I no longer want the gray zone to react to it in any way (disable the zone altogether, but there is no such property or method) image.png (view on web) <https://github.com/user-attachments/assets/fa2d3f16-be64-408b-a1c0-187c8b61eeb8> — Reply to this email directly, view it on GitHub <#630 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC7Z5YXBE5EAMDNTLYD2PBEA3AVCNFSM6AAAAABWRENTI6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNBXGA4TEMZVGI> . You are receiving this because you commented.Message ID: ***@***.***>

[interk0t]

This UX is necessary because the idea is to take an element from the original zone, hover it over the left edge of the screen, which then triggers a new slide with a new zone appearing on top. The user should then be able to interact with the new zone and the element from the previous one (as the new zone completely covers the old one).

Right now, after the new zone appears, only the old zone is responding, while the new one is not. That’s why I thought about adding a function to disable the functionality of a zone in such cases—something like isDisabled: boolean.

[isaacHagoel]

I understand but I hesitate to add this as a generic feature to the library.

…

On Mon, Feb 10, 2025, 18:27 interk0t ***@***.***> wrote: This UX is necessary because the idea is to take an element from the original zone, hover it over the left edge of the screen, which then triggers a new slide with a new zone appearing on top. The user should then be able to interact with the new zone and the element from the previous one (as the new zone completely covers the old one). Right now, after the new zone appears, only the old zone is responding, while the new one is not. That’s why I thought about adding a function to disable the functionality of a zone in such cases—something like isDisabled: boolean. — Reply to this email directly, view it on GitHub <#630 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC3WDXLWS43UC2AZJ5D2PBIGRAVCNFSM6AAAAABWRENTI6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNBXGE2DINZSGQ> . You are receiving this because you commented.Message ID: ***@***.***>

[interk0t]

I understand, thanks for the answers anyway :)