Elements with different size behave incorrectly + import problems + SSR of undefined bug + wrong import + some ways to fix most of them

[kkarpeev]

Hello! Nice lib! But there are few problems.

First of all, there are import problems showing during the build-time due to missing main field in your package.json. Would be cool if you add there:

,
  "main": "./index.js",
  "types": "./types.d.ts"

Second is the way you check SSR mode in HorizontalCenterDropZone.js:

!import.meta.env.SSR

please, change it at least to:

!import.meta.env?.SSR

And also there is incorrect import of writable in the DragDropList.svelte, you should move it from script tag to the top of module script tag, like:

<script context="module">
import { writable } from "svelte/store";
...

'cause you define the dragging const there.

After that your lib will be more usable (and will work in REPL, I think, cause now it doesn't).

And the last, but much more serious problem is that your list item positioning algorithm does not support different item sizes, unfortunately. Can you solve it, pls? :)

Thanks!

[anurag-dhamala]

Looks like I have found a workaround to adjust items of different sizes.

Give itemSize to around 200-300 (play around with it; dragging the items around), and give itemClass. (Say, the itemClass is "single-item"). Then, give the css to it in your global css file as below:

.single-item { 
   height: fit-content !important;
}

The DragDropList component should look something similar to this:

<DragDropList
                    id="verticalY"
                    type={VerticalDropZone}
                    itemSize={300}
                    itemClass="single-item"
                    itemCount={items.length}
                    on:drop={onDrop}
                    let:index
                    keyFn={(index)=> {
                        return items[index].id
                    }}
>