Drag from outside

1"use client";
2 
3import { DndGrid, type Layout, type LayoutItem } from "@dnd-grid/react";
4import { useRef, useState } from "react";
5 
6interface PaletteItem {
7  id: string;
8  label: string;
9  w: number;
10  h: number;
11}
12 
13const paletteItems: PaletteItem[] = [
14  { id: "small", label: "Small (2x2)", w: 2, h: 2 },
15  { id: "wide", label: "Wide (4x2)", w: 4, h: 2 },
16  { id: "tall", label: "Tall (2x4)", w: 2, h: 4 },
17];
18 
19const initialLayout: Layout = [
20  { id: "a", x: 0, y: 0, w: 3, h: 2 },
21  { id: "b", x: 3, y: 0, w: 3, h: 3 },
22  { id: "c", x: 6, y: 0, w: 3, h: 2 },
23  { id: "d", x: 9, y: 0, w: 3, h: 2 },
24];
25 
26export function DragFromOutsideExample() {
27  const [layout, setLayout] = useState<Layout>(initialLayout);
28  const dragItemRef = useRef<PaletteItem | null>(null);
29  const nextIdRef = useRef(1);
30 
31  const handleDropDragOver = () => {
32    const active = dragItemRef.current;
33    return active ? { w: active.w, h: active.h } : undefined;
34  };
35 
36  const handleDrop = (_layout: Layout, item?: LayoutItem | null) => {
37    if (!item) {
38      return;
39    }
40    const nextId = `n${nextIdRef.current}`;
41    nextIdRef.current += 1;
42    setLayout((prev) => [
43      ...prev,
44      { id: nextId, x: item.x, y: item.y, w: item.w, h: item.h },
45    ]);
46  };
47 
48  return (
49    <div>
50      <div style={{ display: "flex", gap: 12, marginBottom: 12 }}>
51        {paletteItems.map((palette) => (
52          <button
53            draggable
54            key={palette.id}
55            onDragStart={(event) => {
56              dragItemRef.current = palette;
57              event.dataTransfer.setData("text/plain", palette.id);
58            }}
59            style={{
60              appearance: "none",
61              background: "white",
62              border: "1px solid #e5e7eb",
63              padding: "6px 10px",
64              borderRadius: "6px",
65              fontSize: "12px",
66              cursor: "grab",
67            }}
68            type="button"
69          >
70            {palette.label}
71          </button>
72        ))}
73      </div>
74 
75      <DndGrid
76        cols={12}
77        layout={layout}
78        onDrop={handleDrop}
79        onDropDragOver={handleDropDragOver}
80        onLayoutChange={setLayout}
81        rowHeight={50}
82      >
83        {layout.map((item) => (
84          <div className="grid-item" key={item.id}>
85            {item.id}
86          </div>
87        ))}
88      </DndGrid>
89    </div>
90  );
91}