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?
the Draggable itself has no styling, it's a pure div:
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>
