Grab position in svelte components

[v1ack]

trafficstars

There is a problem with grab position when you grab by the right side of div. Seems like it is because of bind on svelte component

Here is an expample repl

Without bind it works good

[isaacHagoel]

@v1ack interesting. I wonder why binding has this effect. what is the usecase here? why are do you need to bind this way? Thanks

[v1ack]

I'm developing some kind of text editor with blocks Here is a simple example of idea repl So draggable components have editable content inside

Of course it's possible to do it with store, but with bindings it's easier. Also i found a workaround

<section use:dndzone={{items, flipDurationMs}} on:consider={handleDndConsider} on:finalize={handleDndConsider}>
    {#each items as item(item.id)}
        {#if item.isDndShadowItem}
            <div>
                {item.data}
            </div>
        {:else}
            <Card bind:data={item.data}	/>
        {/if}
    {/each}
</section>

[isaacHagoel]

@v1ack thanks! so it has to do with binding the shadow item?? nice catch. how did it occur to you? i'll need to check what i am doing it within the library code that might cause this strange conflict of interests with Svelte. The first place i should look is the morphing function that basically copies its styles to the dragged element.

if you're going to use the workaround i recommend importing SHADOW_ITEM_MARKER_PROPERTY_NAME and using it in the condition

{#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
            <div>
                {item.data}
            </div>
        {:else}