Drag and Drop atlaskit

<Droppable
    id="status-list"
    accepts={["status"]}
    onDrop={handleDrop}
    class="space-y-3 min-h-32 p-3 border-2 border-dashed border-muted rounded"
>
    <For each={reorderedStatuses()}>
        {(status, index) => (
            <Draggable
                item={{
                    id: status.id.toString(),
                    type: "status",
                    data: status,
                    index: index(),
                    container: "status-list",
                }}
                disabled={isLocked(status)}
                class="flex items-center gap-3 p-3 border border-border rounded"
                onDropOnItem={handleDrop}
            >
                <Show
                    when={!isLocked(status)}
                    fallback={
                        <LockIcon class="w-4 h-4 text-muted-foreground" />
                    }
                >
                    <GripVerticalIcon class="w-4 h-4 text-muted-foreground" />
                </Show>
                <span>{status.name} </span>
            </Draggable>
        )}
    </For>
</Droppable>

<div ref={ref} class={props.class}>
    {props.children}
</div>