S
SolidJS•22h ago
mrVinicius

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>
No description
1 Reply
bigmistqke
bigmistqke•17h ago
overflow: hidden?

Did you find this page helpful?