SolidJS•3mo ago

Drag and Drop atlaskit

Hey, this isn’t really an issue with SolidJS, but since I’m building with it, I figured I’d ask here in case someone can help. My draggable object has a square box that I can’t get rid of. Does anyone have an idea how to fix this?

<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>

<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>

the Draggable itself has no styling, it's a pure div:

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

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

4 Replies

bigmistqke•3mo ago

overflow: hidden?

mrViniciusOP•3mo ago

nah, didnt work i think its the ghost element that drag behaviour has

mrViniciusOP•3mo ago

yay! fixed: needs some improvement, but its working

mrViniciusOP•3mo ago

used the nativeSetDragImage api on the onGenerateDragPreview method of atlaskit

Gaming

Programming

Drag and Drop atlaskit

Did you find this page helpful?