react-drag-drop-kanban 1.0.0

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Bibin antony
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,158 @@
+## react-drag-drop-kanban | A React component by **Bibin Antony**
+
+A highly customizable, multiple-column drag-and-drop board component built with the **native HTML5 drag-and-drop API**.
+
+**Key Features:** 
+- Uses native HTML5 drag-and-drop—fully compatible with React 18/19 and StrictMode!
+- **Board Dragging:** Drag and reorder entire columns seamlessly!
+- **Custom Rendering:** Render absolutely anything inside the drag items using the `renderItem` prop.
+
+Just send a JSON array to create draggable and droppable columns. The component will dynamically render the columns based on the provided data structure.
+
+## Demo
+
+[Live demo](https://bibinantony1998.github.io/react-drag-and-drop-multiple/)
+
+### Installation
+
+```bash
+npm install react-drag-drop-kanban
+```
+
+<sup>\* Requires `react` and `react-dom` version 18+ or 19+ as peer dependencies</sup>
+
+**Compatible with:**
+- ✅ React 18.0.0+
+- ✅ React 19.0.0+
+- ✅ Works with both React 18 and React 19 APIs
+- ✅ StrictMode compatible in both versions
+
+---
+
+### Features
+
+✅ **Zero external drag-drop dependencies** - Uses native HTML5 APIs  
+✅ **React 18 & 19 compatible** - Works seamlessly with modern React  
+✅ **Board Dragging** - Reorder entire boards/columns by dragging them  
+✅ **Custom Rendering** - Full control over item rendering with `renderItem`  
+✅ **Multiple item selection** - Select and drag multiple items at once  
+✅ **Custom drag preview** - Beautiful SVG badge shows item count when dragging multiple items  
+✅ **Rich animations** - Smooth hover effects, pulse animations, and visual feedback  
+✅ **Cross-column dragging** - Move items between different columns  
+✅ **Lightweight** - No heavy dependencies
+
+### Visual Features
+
+🎨 **Custom Multi-Drag Badge** - When dragging multiple items, see a stunning SVG badge with:
+- Stacked cards icon
+- Item count in a sleek badge
+- Beautiful shadow effects
+
+🎯 **Smart Hover Effects** - Hover animations work on both selected and unselected items
+
+✨ **Multi-Drag Animation** - All selected items pulse during drag operations
+
+🌈 **Visual Feedback** - Clear indicators for selected items, drop zones (for both items and boards), and drag states
+
+---
+
+### Usage
+
+```jsx
+import DragDropComponent from "react-drag-drop-kanban";
+
+const data = [
+  {
+    id: "1",
+    name: "Todo",
+    data: [
+      {
+        id: "1",
+        title: "Design System",
+        description: "Create component library",
+        priority: "high",
+        assignee: "John Doe",
+      },
+      {
+        id: "2",
+        title: "API Integration",
+        description: "Connect backend endpoints",
+        priority: "medium",
+        assignee: "Jane Smith",
+      }
+    ],
+  },
+  {
+    id: "2",
+    name: "In Progress",
+    data: [
+      {
+        id: "3",
+        title: "Authentication",
+        description: "Implement OAuth2",
+        priority: "high",
+        assignee: "Alice Brown",
+      }
+    ],
+  }
+];
+
+// Define your custom render function to render anything you want!
+const renderTaskCard = (item, index, listId) => (
+  <div style={{ padding: "16px", backgroundColor: "white", borderRadius: "8px", border: "1px solid #e0e0e0" }}>
+    <h3>{item.title}</h3>
+    <p>{item.description}</p>
+    <div style={{ display: "flex", justifyContent: "space-between" }}>
+      <span>👤 {item.assignee}</span>
+      <span style={{ color: item.priority === "high" ? "#ff4757" : "#2ed573" }}>
+        {item.priority}
+      </span>
+    </div>
+  </div>
+);
+
+const App = () => (
+  <DragDropComponent
+    data={data}
+    renderItem={renderTaskCard}
+    onChange={(newData) => console.log(newData)}
+    width="100%"
+    height="600px"
+    multiple={true} // Enable multi-drag
+    boardDraggable={true} // Enable dragging entire columns
+    title={true}
+  />
+);
+
+export default App;
+```
+
+**You can render:**
+- 📋 Kanban cards with rich content
+- ✅ Task items with checkboxes and metadata
+- 📁 File manager items with icons
+- 🛒 Shopping cart products with images
+- 👥 User cards with avatars
+- **Anything you can imagine!**
+
+---
+
+### Props
+
+| Prop Name        | Type                                     | Default Value | Description                                                                                  |
+| ---------------- | ---------------------------------------- | ------------- | -------------------------------------------------------------------------------------------- |
+| `data`           | array                                    | **required**  | Array of lists with items to display                                                         |
+| `onChange`       | function                                 | **required**  | Callback function that receives updated data when items or boards are moved                  |
+| `width`          | number/string                            | `"100%"`      | Width of the component                                                                       |
+| `height`         | number/string                            | `"100%"`      | Height of the component                                                                      |
+| `renderItem`     | `(item, index, listId) => ReactNode`     | optional      | Custom render function for each item - render anything you want!                             |
+| `boardDraggable` | boolean                                  | false         | Enable dragging and reordering entire columns/boards                                         |
+| `multiple`       | boolean                                  | false         | Enable multi-select mode (select and drag multiple items at once using checkboxes)           |
+| `title`          | boolean                                  | false         | Show list titles                                                                             |
+| `centerTitle`    | boolean                                  | false         | Center-align list titles                                                                     |
+| `draggerImg`     | boolean                                  | false         | Show drag handle image on items (only used when fallback rendering is active)                |
+| `children`       | ReactNode                                | optional      | Legacy prop - use `renderItem` instead for custom rendering                                  |
+
+---
+
+[Bibin Antony](https://github.com/bibinantony1998)

package/build/index.js

@@ -0,0 +1,291 @@
+import { jsx as u, jsxs as L } from "react/jsx-runtime";
+import { useState as y } from "react";
+const z = (n) => /* @__PURE__ */ u("div", { className: "cursor-pointer drag_item_content", onClick: () => {
+  var w;
+  (w = document.getElementById(n.inputId)) == null || w.click();
+}, children: n.children ? n.children : /* @__PURE__ */ u("main", { className: `drag_item ${n.draggerImg ? "drag_item_drag_img" : ""}`, children: /* @__PURE__ */ u("span", { className: "", children: /* @__PURE__ */ u("div", { children: n.data.value }) }) }) }), G = ({
+  children: n,
+  title: f,
+  centerTitle: w,
+  onDrop: g,
+  onDragOver: A,
+  draggable: b,
+  onDragStart: v,
+  onDragEnd: x,
+  isDragged: I,
+  isDragOver: N
+}) => /* @__PURE__ */ u("div", { className: `h-100 w-100 ${I ? "dragging-board" : ""} ${N ? "board-drag-over" : ""}`, children: /* @__PURE__ */ u("div", { className: "h-100", children: /* @__PURE__ */ u("div", { className: "h-100", onDrop: g, onDragOver: A, children: /* @__PURE__ */ L(
+  "div",
+  {
+    className: "h-100 drag_box_container",
+    draggable: b,
+    onDragStart: v,
+    onDragEnd: x,
+    children: [
+      f ? /* @__PURE__ */ u(
+        "div",
+        {
+          className: `dragger_title ${w ? "center_title" : ""}`,
+          children: f
+        }
+      ) : "",
+      /* @__PURE__ */ u(
+        "div",
+        {
+          className: `drag_box ${f ? "drag_box_on_drag_tittle" : ""}`,
+          children: n
+        }
+      )
+    ]
+  }
+) }) }) }), K = (n) => {
+  const [f, w] = y(n.data), [g, A] = y({ items: [], selectedArray: "" }), [b, v] = y(null), [x, I] = y(null), [N, _] = y(null), k = (t, e) => {
+    const i = Array.from(t), [r] = i.splice(e, 1);
+    return [r, i];
+  }, $ = (t, e, i, r) => {
+    let o = { ...g };
+    g.selectedArray !== r && (A({ items: [], selectedArray: r }), o = { items: [], selectedArray: r });
+    let a = [];
+    if (t.target.checked) {
+      let s = [];
+      s.push({ ...e, sourceIndex: i }), a = [...o.items, ...s];
+    } else {
+      let s = [...o.items];
+      var l = s.findIndex((d) => d.id === e.id);
+      s.splice(l, 1), a = [...s];
+    }
+    a.sort((s, d) => s.sourceIndex - d.sourceIndex), A({ items: a, selectedArray: r });
+  }, T = (t, e, i) => {
+    const r = Array.from(t);
+    return r.splice(e, 0, i), r;
+  }, B = (t, e, i, r) => {
+    t.stopPropagation(), t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/html", t.currentTarget.innerHTML), t.dataTransfer.setData(
+      "application/json",
+      JSON.stringify({
+        item: e,
+        sourceListId: i,
+        sourceIndex: r
+      })
+    );
+    const o = g.items.findIndex((a) => a.sourceIndex === r) !== -1 && g.selectedArray === i;
+    if (o && g.items.length > 1) {
+      const a = j(g.items.length);
+      document.body.appendChild(a), t.dataTransfer.setDragImage(a, 40, 40), setTimeout(() => {
+        document.body.removeChild(a);
+      }, 0);
+    }
+    t.currentTarget.classList.add("dragging"), o && g.items.length > 1 && g.items.forEach((a) => {
+      var s;
+      const l = document.getElementById(
+        `${i}_${a.sourceIndex}`
+      );
+      l && ((s = l.closest(".drag_item_wrapper")) == null || s.classList.add("multi-dragging"));
+    });
+  }, j = (t) => {
+    const e = document.createElement("div");
+    e.style.cssText = `
+      position: absolute;
+      top: -1000px;
+      left: -1000px;
+      width: 100px;
+      height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
+    `;
+    const i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    i.setAttribute("width", "70"), i.setAttribute("height", "70"), i.setAttribute("viewBox", "0 0 70 70"), i.style.cssText = "pointer-events: none;";
+    const r = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    );
+    r.setAttribute("x", "10"), r.setAttribute("y", "10"), r.setAttribute("width", "50"), r.setAttribute("height", "50"), r.setAttribute("rx", "8"), r.setAttribute("fill", "white"), r.setAttribute("stroke", "#e0e0e0"), r.setAttribute("stroke-width", "2"), i.appendChild(r);
+    const o = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "g"
+    ), a = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    );
+    a.setAttribute("x", "28"), a.setAttribute("y", "20"), a.setAttribute("width", "22"), a.setAttribute("height", "28"), a.setAttribute("rx", "2"), a.setAttribute("fill", "#f5f5f5"), a.setAttribute("stroke", "#ccc"), a.setAttribute("stroke-width", "1");
+    const l = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    );
+    l.setAttribute("x", "26"), l.setAttribute("y", "23"), l.setAttribute("width", "22"), l.setAttribute("height", "28"), l.setAttribute("rx", "2"), l.setAttribute("fill", "#fafafa"), l.setAttribute("stroke", "#bbb"), l.setAttribute("stroke-width", "1");
+    const s = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    );
+    s.setAttribute("x", "24"), s.setAttribute("y", "26"), s.setAttribute("width", "22"), s.setAttribute("height", "28"), s.setAttribute("rx", "2"), s.setAttribute("fill", "white"), s.setAttribute("stroke", "#999"), s.setAttribute("stroke-width", "1.5"), o.appendChild(a), o.appendChild(l), o.appendChild(s), i.appendChild(o);
+    const d = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "circle"
+    );
+    d.setAttribute("cx", "52"), d.setAttribute("cy", "18"), d.setAttribute("r", "12"), d.setAttribute("fill", "#666"), d.setAttribute("stroke", "white"), d.setAttribute("stroke-width", "2");
+    const c = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    return c.setAttribute("x", "52"), c.setAttribute("y", "23"), c.setAttribute("text-anchor", "middle"), c.setAttribute("fill", "white"), c.setAttribute("font-size", "13"), c.setAttribute("font-weight", "700"), c.setAttribute("font-family", "system-ui, -apple-system, sans-serif"), c.textContent = t.toString(), i.appendChild(d), i.appendChild(c), e.appendChild(i), e;
+  }, O = (t) => {
+    t.currentTarget.classList.remove("dragging"), document.querySelectorAll(".multi-dragging").forEach((e) => {
+      e.classList.remove("multi-dragging");
+    }), v(null);
+  }, J = (t, e, i) => {
+    t.preventDefault(), t.dataTransfer.dropEffect = "move", v({ listId: e, index: i });
+  }, S = (t, e, i) => {
+    t.preventDefault(), t.stopPropagation();
+    const r = t.dataTransfer.getData("application/json");
+    if (!r) return;
+    const o = JSON.parse(r);
+    if (o.type === "board") {
+      const d = o.sourceListId;
+      if (d === e) return;
+      const c = [...f], h = c.findIndex((m) => m.id === d), p = c.findIndex((m) => m.id === e);
+      if (h !== -1 && p !== -1) {
+        const [m] = c.splice(h, 1);
+        c.splice(p, 0, m), w(c), n.onChange(c);
+      }
+      _(null), I(null);
+      return;
+    }
+    const { sourceListId: a, sourceIndex: l } = o, s = [...f];
+    if (g.items.findIndex((d) => d.sourceIndex === l) !== -1 && g.selectedArray === a)
+      g.items.forEach((d, c) => {
+        let h = s.findIndex((p) => p.id === a);
+        if (h !== -1) {
+          const p = s[h].data;
+          let m = d.sourceIndex - c;
+          const [D, q] = k(
+            p,
+            m
+          );
+          s[h].data = q;
+          let E = s.findIndex(
+            (C) => C.id === e
+          );
+          if (E !== -1) {
+            const C = s[E].data;
+            s[E].data = T(
+              C,
+              i + c,
+              D
+            );
+          }
+        }
+      }), A({ items: [], selectedArray: "" });
+    else {
+      let d = s.findIndex((h) => h.id === a);
+      const c = s[d].data;
+      if (d !== -1) {
+        const [h, p] = k(
+          c,
+          l
+        );
+        s[d].data = p;
+        let m = s.findIndex(
+          (D) => D.id === e
+        );
+        if (m !== -1) {
+          const D = s[m].data;
+          s[m].data = T(
+            D,
+            i,
+            h
+          );
+        }
+      }
+    }
+    w(s), v(null), n.onChange(s);
+  }, M = (t, e) => {
+    _(null);
+    const i = t.dataTransfer.getData("application/json");
+    if (i && JSON.parse(i).type === "board") {
+      S(t, e, 0);
+      return;
+    }
+    const r = f.find((o) => o.id === e);
+    r && S(t, e, r.data.length);
+  }, P = (t, e) => {
+    if (!n.boardDraggable) {
+      t.preventDefault();
+      return;
+    }
+    t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData(
+      "application/json",
+      JSON.stringify({ type: "board", sourceListId: e })
+    ), I(e);
+  }, F = (t) => {
+    I(null), _(null);
+  };
+  return /* @__PURE__ */ u("div", { style: { width: n.width, height: n.height }, children: /* @__PURE__ */ u("div", { className: "d-flex h-100 p-2", children: f.map((t) => /* @__PURE__ */ u(
+    G,
+    {
+      centerTitle: n.centerTitle,
+      title: n.title ? t.name : "",
+      id: t.id,
+      draggable: n.boardDraggable,
+      onDragStart: (e) => P(e, t.id),
+      onDragEnd: F,
+      isDragged: x === t.id,
+      isDragOver: N === t.id,
+      onDrop: (e) => M(e, t.id),
+      onDragOver: (e) => {
+        e.preventDefault(), e.stopPropagation(), e.dataTransfer.dropEffect = "move", x && x !== t.id && _(t.id);
+      },
+      children: t.data.map((e, i) => /* @__PURE__ */ u(
+        "div",
+        {
+          draggable: !0,
+          onDragStart: (r) => B(r, e, t.id, i),
+          onDragEnd: O,
+          onDragOver: (r) => J(r, t.id, i),
+          onDrop: (r) => S(r, t.id, i),
+          className: `drag_item_wrapper ${(b == null ? void 0 : b.listId) === t.id && (b == null ? void 0 : b.index) === i ? "drag-over" : ""}`,
+          children: /* @__PURE__ */ L("div", { className: "drag_item_container", children: [
+            /* @__PURE__ */ u(
+              "input",
+              {
+                disabled: !n.multiple,
+                id: `${t.id}_${i}`,
+                type: "checkbox",
+                checked: g.selectedArray === t.id && g.items.findIndex((r) => r.id === e.id) !== -1,
+                onChange: (r) => $(r, e, i, t.id)
+              }
+            ),
+            /* @__PURE__ */ u(
+              "div",
+              {
+                className: "drag_item_content",
+                onClick: () => {
+                  var r;
+                  (r = document.getElementById(`${t.id}_${i}`)) == null || r.click();
+                },
+                children: n.renderItem ? (
+                  // Use custom render function if provided
+                  n.renderItem(e, i, t.id)
+                ) : (
+                  // Fallback to default Card component for backward compatibility
+                  /* @__PURE__ */ u(
+                    z,
+                    {
+                      draggerImg: n.draggerImg,
+                      data: e,
+                      inputId: `${t.id}_${i}`,
+                      children: n.children ? n.children : null
+                    }
+                  )
+                )
+              }
+            )
+          ] })
+        },
+        e.id
+      ))
+    },
+    `drop_box_${t.id}`
+  )) }) });
+};
+export {
+  K as default
+};
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/lib/components/card/index.tsx","../src/lib/components/list/index.tsx","../src/lib/index.tsx"],"sourcesContent":["import React, { FunctionComponent } from \"react\";\nimport { CardProps } from \"../../model\";\n\nconst Card: FunctionComponent<CardProps> = (props) => {\n\n  const itemClicked = (): void => {\n    document.getElementById(props.inputId)?.click()\n  }\n\n  return (\n    <div className=\"cursor-pointer drag_item_content\" onClick={itemClicked}>\n      \n          {props.children ? props.children :  \n            <main className={`drag_item ${props.draggerImg ? \"drag_item_drag_img\" : \"\"}`}>\n              <span className=\"\">\n                  <div>{props.data.value}</div>\n              </span>\n            </main>\n          }\n      \n    </div>\n  );\n};\n\nexport default Card;\n","import React from \"react\";\n\ntype ListProps = {\n  children?: React.ReactNode;\n  title: string;\n  id: string;\n  centerTitle?: boolean;\n  onDrop: (e: React.DragEvent) => void;\n  onDragOver: (e: React.DragEvent) => void;\n  draggable?: boolean;\n  onDragStart?: (e: React.DragEvent) => void;\n  onDragEnd?: (e: React.DragEvent) => void;\n  isDragged?: boolean;\n  isDragOver?: boolean;\n};\n\nconst List = ({\n  children,\n  title,\n  centerTitle,\n  onDrop,\n  onDragOver,\n  draggable,\n  onDragStart,\n  onDragEnd,\n  isDragged,\n  isDragOver,\n}: ListProps) => {\n  return (\n    <div className={`h-100 w-100 ${isDragged ? \"dragging-board\" : \"\"} ${isDragOver ? \"board-drag-over\" : \"\"}`}>\n      <div className=\"h-100\">\n        <div className=\"h-100\" onDrop={onDrop} onDragOver={onDragOver}>\n          <div\n            className=\"h-100 drag_box_container\"\n            draggable={draggable}\n            onDragStart={onDragStart}\n            onDragEnd={onDragEnd}\n          >\n            {title ? (\n              <div\n                className={`dragger_title ${centerTitle ? \"center_title\" : \"\"}`}\n              >\n                {title}\n              </div>\n            ) : (\n              \"\"\n            )}\n            <div\n              className={`drag_box ${title ? \"drag_box_on_drag_tittle\" : \"\"}`}\n            >\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default List;\n","import Card from \"./components/card\";\nimport List from \"./components/list\";\nimport { FunctionComponent, useState } from \"react\";\nimport { MainContainerProps } from \"./model\";\nimport \"./react-drag-drop-style.css\";\n\nconst MainContainer: FunctionComponent<MainContainerProps> = (props) => {\n  const [items, setItems] = useState(props.data);\n  const [selectItems, setSelectItems] = useState<{\n    items: any[];\n    selectedArray: string;\n  }>({ items: [], selectedArray: \"\" });\n  const [draggedOver, setDraggedOver] = useState<{\n    listId: string;\n    index: number;\n  } | null>(null);\n  const [draggedBoardId, setDraggedBoardId] = useState<string | null>(null);\n  const [boardDragOverId, setBoardDragOverId] = useState<string | null>(null);\n\n  const removeFromList = (list: any, index: any) => {\n    const result = Array.from(list);\n    const [removed] = result.splice(index, 1);\n    return [removed, result];\n  };\n\n  const selectFromList = (\n    event: any,\n    item: any,\n    index: number,\n    draggedArray: string\n  ) => {\n    let currentSelectedItems = { ...selectItems };\n    if (selectItems.selectedArray !== draggedArray) {\n      setSelectItems({ items: [], selectedArray: draggedArray });\n      currentSelectedItems = { items: [], selectedArray: draggedArray };\n    }\n\n    let result = [];\n    if (event.target.checked) {\n      let data = [];\n      data.push({ ...item, sourceIndex: index });\n      result = [...currentSelectedItems.items, ...data];\n    } else {\n      let data = [...currentSelectedItems.items];\n      var itemIndex = data.findIndex((el) => el.id === item.id);\n      data.splice(itemIndex, 1);\n      result = [...data];\n    }\n    result.sort((a, b) => {\n      return a.sourceIndex - b.sourceIndex;\n    });\n    setSelectItems({ items: result, selectedArray: draggedArray });\n  };\n\n  const addToList = (list: any, index: any, element: any) => {\n    const result = Array.from(list);\n    result.splice(index, 0, element);\n    return result;\n  };\n\n  const handleDragStart = (\n    e: React.DragEvent,\n    item: any,\n    listId: string,\n    index: number\n  ) => {\n    e.stopPropagation();\n    e.dataTransfer.effectAllowed = \"move\";\n    e.dataTransfer.setData(\"text/html\", e.currentTarget.innerHTML);\n    e.dataTransfer.setData(\n      \"application/json\",\n      JSON.stringify({\n        item,\n        sourceListId: listId,\n        sourceIndex: index,\n      })\n    );\n\n    // Check if this item is part of a multi-selection\n    const isMultiDrag =\n      selectItems.items.findIndex((d) => d.sourceIndex === index) !== -1 &&\n      selectItems.selectedArray === listId;\n\n    if (isMultiDrag && selectItems.items.length > 1) {\n      // Create custom drag image for multiple items\n      const dragImage = createMultiDragImage(selectItems.items.length);\n      document.body.appendChild(dragImage);\n      e.dataTransfer.setDragImage(dragImage, 40, 40);\n\n      // Clean up the drag image after a short delay\n      setTimeout(() => {\n        document.body.removeChild(dragImage);\n      }, 0);\n    }\n\n    // Add dragging class for visual feedback\n    (e.currentTarget as HTMLElement).classList.add(\"dragging\");\n\n    // If dragging multiple items, add visual feedback to all selected items\n    if (isMultiDrag && selectItems.items.length > 1) {\n      selectItems.items.forEach((selectedItem) => {\n        const element = document.getElementById(\n          `${listId}_${selectedItem.sourceIndex}`\n        );\n        if (element) {\n          element\n            .closest(\".drag_item_wrapper\")\n            ?.classList.add(\"multi-dragging\");\n        }\n      });\n    }\n  };\n\n  const createMultiDragImage = (count: number): HTMLElement => {\n    const container = document.createElement(\"div\");\n    container.style.cssText = `\n      position: absolute;\n      top: -1000px;\n      left: -1000px;\n      width: 100px;\n      height: 100px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));\n    `;\n\n    const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n    svg.setAttribute(\"width\", \"70\");\n    svg.setAttribute(\"height\", \"70\");\n    svg.setAttribute(\"viewBox\", \"0 0 70 70\");\n    svg.style.cssText = \"pointer-events: none;\";\n\n    // Background card\n    const bgRect = document.createElementNS(\n      \"http://www.w3.org/2000/svg\",\n      \"rect\"\n    );\n    bgRect.setAttribute(\"x\", \"10\");\n    bgRect.setAttribute(\"y\", \"10\");\n    bgRect.setAttribute(\"width\", \"50\");\n    bgRect.setAttribute(\"height\", \"50\");\n    bgRect.setAttribute(\"rx\", \"8\");\n    bgRect.setAttribute(\"fill\", \"white\");\n    bgRect.setAttribute(\"stroke\", \"#e0e0e0\");\n    bgRect.setAttribute(\"stroke-width\", \"2\");\n    svg.appendChild(bgRect);\n\n    // Add stacked cards icon (simple, minimal)\n    const stackGroup = document.createElementNS(\n      \"http://www.w3.org/2000/svg\",\n      \"g\"\n    );\n\n    // Back card (subtle gray)\n    const rect1 = document.createElementNS(\n      \"http://www.w3.org/2000/svg\",\n      \"rect\"\n    );\n    rect1.setAttribute(\"x\", \"28\");\n    rect1.setAttribute(\"y\", \"20\");\n    rect1.setAttribute(\"width\", \"22\");\n    rect1.setAttribute(\"height\", \"28\");\n    rect1.setAttribute(\"rx\", \"2\");\n    rect1.setAttribute(\"fill\", \"#f5f5f5\");\n    rect1.setAttribute(\"stroke\", \"#ccc\");\n    rect1.setAttribute(\"stroke-width\", \"1\");\n\n    // Middle card\n    const rect2 = document.createElementNS(\n      \"http://www.w3.org/2000/svg\",\n      \"rect\"\n    );\n    rect2.setAttribute(\"x\", \"26\");\n    rect2.setAttribute(\"y\", \"23\");\n    rect2.setAttribute(\"width\", \"22\");\n    rect2.setAttribute(\"height\", \"28\");\n    rect2.setAttribute(\"rx\", \"2\");\n    rect2.setAttribute(\"fill\", \"#fafafa\");\n    rect2.setAttribute(\"stroke\", \"#bbb\");\n    rect2.setAttribute(\"stroke-width\", \"1\");\n\n    // Front card (white, most prominent)\n    const rect3 = document.createElementNS(\n      \"http://www.w3.org/2000/svg\",\n      \"rect\"\n    );\n    rect3.setAttribute(\"x\", \"24\");\n    rect3.setAttribute(\"y\", \"26\");\n    rect3.setAttribute(\"width\", \"22\");\n    rect3.setAttribute(\"height\", \"28\");\n    rect3.setAttribute(\"rx\", \"2\");\n    rect3.setAttribute(\"fill\", \"white\");\n    rect3.setAttribute(\"stroke\", \"#999\");\n    rect3.setAttribute(\"stroke-width\", \"1.5\");\n\n    stackGroup.appendChild(rect1);\n    stackGroup.appendChild(rect2);\n    stackGroup.appendChild(rect3);\n    svg.appendChild(stackGroup);\n\n    // Add count badge (simple gray circle)\n    const badge = document.createElementNS(\n      \"http://www.w3.org/2000/svg\",\n      \"circle\"\n    );\n    badge.setAttribute(\"cx\", \"52\");\n    badge.setAttribute(\"cy\", \"18\");\n    badge.setAttribute(\"r\", \"12\");\n    badge.setAttribute(\"fill\", \"#666\");\n    badge.setAttribute(\"stroke\", \"white\");\n    badge.setAttribute(\"stroke-width\", \"2\");\n\n    const text = document.createElementNS(\"http://www.w3.org/2000/svg\", \"text\");\n    text.setAttribute(\"x\", \"52\");\n    text.setAttribute(\"y\", \"23\");\n    text.setAttribute(\"text-anchor\", \"middle\");\n    text.setAttribute(\"fill\", \"white\");\n    text.setAttribute(\"font-size\", \"13\");\n    text.setAttribute(\"font-weight\", \"700\");\n    text.setAttribute(\"font-family\", \"system-ui, -apple-system, sans-serif\");\n    text.textContent = count.toString();\n\n    svg.appendChild(badge);\n    svg.appendChild(text);\n    container.appendChild(svg);\n\n    return container;\n  };\n\n  const handleDragEnd = (e: React.DragEvent) => {\n    (e.currentTarget as HTMLElement).classList.remove(\"dragging\");\n\n    // Remove multi-dragging class from all items\n    document.querySelectorAll(\".multi-dragging\").forEach((el) => {\n      el.classList.remove(\"multi-dragging\");\n    });\n\n    setDraggedOver(null);\n  };\n\n  const handleDragOver = (\n    e: React.DragEvent,\n    listId: string,\n    index: number\n  ) => {\n    e.preventDefault();\n    e.dataTransfer.dropEffect = \"move\";\n    setDraggedOver({ listId, index });\n  };\n\n  const handleDrop = (\n    e: React.DragEvent,\n    destinationListId: string,\n    destinationIndex: number\n  ) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const data = e.dataTransfer.getData(\"application/json\");\n    if (!data) return;\n\n    const parsedData = JSON.parse(data);\n\n    if (parsedData.type === \"board\") {\n      const sourceListId = parsedData.sourceListId;\n      if (sourceListId === destinationListId) return;\n      \n      const listCopy = [...items];\n      const sourceIndex = listCopy.findIndex((l) => l.id === sourceListId);\n      const destIndex = listCopy.findIndex((l) => l.id === destinationListId);\n      \n      if (sourceIndex !== -1 && destIndex !== -1) {\n        const [removedBoard] = listCopy.splice(sourceIndex, 1);\n        listCopy.splice(destIndex, 0, removedBoard);\n        setItems(listCopy);\n        props.onChange(listCopy);\n      }\n      setBoardDragOverId(null);\n      setDraggedBoardId(null);\n      return;\n    }\n\n    const { sourceListId, sourceIndex } = parsedData;\n\n    const listCopy: any[] = [...items];\n\n    // Check if multiple items are selected and being dragged\n    if (\n      selectItems.items.findIndex((d) => d.sourceIndex === sourceIndex) !==\n        -1 &&\n      selectItems.selectedArray === sourceListId\n    ) {\n      // Handle multiple items\n      selectItems.items.forEach((el, i) => {\n        let sourceId = listCopy.findIndex((list) => list.id === sourceListId);\n        if (sourceId !== -1) {\n          const sourceList = listCopy[sourceId].data;\n          let adjustedSourceIndex = el.sourceIndex - i;\n          const [removedElement, newSourceList] = removeFromList(\n            sourceList,\n            adjustedSourceIndex\n          );\n          listCopy[sourceId].data = newSourceList;\n\n          let destinationId = listCopy.findIndex(\n            (list) => list.id === destinationListId\n          );\n          if (destinationId !== -1) {\n            const destinationList = listCopy[destinationId].data;\n            listCopy[destinationId].data = addToList(\n              destinationList,\n              destinationIndex + i,\n              removedElement\n            );\n          }\n        }\n      });\n      setSelectItems({ items: [], selectedArray: \"\" });\n    } else {\n      // Handle single item\n      let sourceId = listCopy.findIndex((list) => list.id === sourceListId);\n      const sourceList = listCopy[sourceId].data;\n      if (sourceId !== -1) {\n        const [removedElement, newSourceList] = removeFromList(\n          sourceList,\n          sourceIndex\n        );\n\n        listCopy[sourceId].data = newSourceList;\n\n        let destId = listCopy.findIndex(\n          (list) => list.id === destinationListId\n        );\n        if (destId !== -1) {\n          const destinationList = listCopy[destId].data;\n          listCopy[destId].data = addToList(\n            destinationList,\n            destinationIndex,\n            removedElement\n          );\n        }\n      }\n    }\n\n    setItems(listCopy);\n    setDraggedOver(null);\n    props.onChange(listCopy);\n  };\n\n  const handleListDrop = (e: React.DragEvent, listId: string) => {\n    setBoardDragOverId(null);\n    const dataStr = e.dataTransfer.getData(\"application/json\");\n    if (dataStr) {\n      const parsedData = JSON.parse(dataStr);\n      if (parsedData.type === \"board\") {\n        handleDrop(e, listId, 0); \n        return;\n      }\n    }\n\n    // Get the list and drop at the end\n    const list = items.find((l) => l.id === listId);\n    if (list) {\n      handleDrop(e, listId, list.data.length);\n    }\n  };\n\n  const handleBoardDragStart = (e: React.DragEvent, listId: string) => {\n    if (!props.boardDraggable) {\n      e.preventDefault();\n      return;\n    }\n    e.dataTransfer.effectAllowed = \"move\";\n    e.dataTransfer.setData(\n      \"application/json\",\n      JSON.stringify({ type: \"board\", sourceListId: listId })\n    );\n    setDraggedBoardId(listId);\n  };\n\n  const handleBoardDragEnd = (e: React.DragEvent) => {\n    setDraggedBoardId(null);\n    setBoardDragOverId(null);\n  };\n\n  return (\n    <div style={{ width: props.width, height: props.height }}>\n      <div className=\"d-flex h-100 p-2\">\n        {items.map((el) => {\n          return (\n            <List\n              key={`drop_box_${el.id}`}\n              centerTitle={props.centerTitle}\n              title={props.title ? el.name : \"\"}\n              id={el.id}\n              draggable={props.boardDraggable}\n              onDragStart={(e) => handleBoardDragStart(e, el.id)}\n              onDragEnd={handleBoardDragEnd}\n              isDragged={draggedBoardId === el.id}\n              isDragOver={boardDragOverId === el.id}\n              onDrop={(e) => handleListDrop(e, el.id)}\n              onDragOver={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                e.dataTransfer.dropEffect = \"move\";\n                if (draggedBoardId && draggedBoardId !== el.id) {\n                  setBoardDragOverId(el.id);\n                }\n              }}\n            >\n              {el.data.map((item: any, index: number) => (\n                <div\n                  key={item.id}\n                  draggable\n                  onDragStart={(e) => handleDragStart(e, item, el.id, index)}\n                  onDragEnd={handleDragEnd}\n                  onDragOver={(e) => handleDragOver(e, el.id, index)}\n                  onDrop={(e) => handleDrop(e, el.id, index)}\n                  className={`drag_item_wrapper ${\n                    draggedOver?.listId === el.id &&\n                    draggedOver?.index === index\n                      ? \"drag-over\"\n                      : \"\"\n                  }`}\n                >\n                  <div className=\"drag_item_container\">\n                    <input\n                      disabled={!props.multiple}\n                      id={`${el.id}_${index}`}\n                      type={\"checkbox\"}\n                      checked={\n                        selectItems.selectedArray === el.id &&\n                        selectItems.items.findIndex((e) => e.id === item.id) !==\n                          -1\n                      }\n                      onChange={(event) =>\n                        selectFromList(event, item, index, el.id)\n                      }\n                    />\n                    <div\n                      className=\"drag_item_content\"\n                      onClick={() => {\n                        document.getElementById(`${el.id}_${index}`)?.click();\n                      }}\n                    >\n                      {props.renderItem ? (\n                        // Use custom render function if provided\n                        props.renderItem(item, index, el.id)\n                      ) : (\n                        // Fallback to default Card component for backward compatibility\n                        <Card\n                          draggerImg={props.draggerImg}\n                          data={item}\n                          inputId={`${el.id}_${index}`}\n                        >\n                          {props.children ? props.children : null}\n                        </Card>\n                      )}\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </List>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default MainContainer;\n"],"names":["Card","props","jsx","_a","List","children","title","centerTitle","onDrop","onDragOver","draggable","onDragStart","onDragEnd","isDragged","isDragOver","jsxs","MainContainer","items","setItems","useState","selectItems","setSelectItems","draggedOver","setDraggedOver","draggedBoardId","setDraggedBoardId","boardDragOverId","setBoardDragOverId","removeFromList","list","index","result","removed","selectFromList","event","item","draggedArray","currentSelectedItems","data","itemIndex","el","a","b","addToList","element","handleDragStart","e","listId","isMultiDrag","d","dragImage","createMultiDragImage","selectedItem","count","container","svg","bgRect","stackGroup","rect1","rect2","rect3","badge","text","handleDragEnd","handleDragOver","handleDrop","destinationListId","destinationIndex","parsedData","sourceListId","listCopy","sourceIndex","l","destIndex","removedBoard","i","sourceId","sourceList","adjustedSourceIndex","removedElement","newSourceList","destinationId","destinationList","destId","handleListDrop","dataStr","handleBoardDragStart","handleBoardDragEnd"],"mappings":"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"}

package/build/react-drag-drop-kanban.css

@@ -0,0 +1 @@
+.drag_box_container{border:1px solid black;margin-left:.5rem;margin-right:.5rem;border-radius:.375rem}.drag_box{padding:10px;overflow:auto;height:100%}.dragger_title{border-bottom:1px solid black;padding:10px;-webkit-user-select:none;user-select:none}.drag_box_on_drag_tittle{height:calc(100% - 52px);overflow:auto}.drag_item{position:relative;border:1px solid #dddddd;border-radius:4px;overflow:hidden;-webkit-user-select:none;user-select:none;padding:10px;margin-bottom:10px;background-color:#fff}.drag_item.drag_item_drag_img{padding-left:40px}.drag_item_drag_img:before{content:"";background-image:url(data:image/png;base64,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);position:absolute;left:0;top:0;bottom:0;width:30px;background-size:100%;background-repeat:no-repeat;background-position:center;background-color:#efefef;padding:0}.drag_item_container{position:relative}.drag_item_container input{position:absolute;opacity:0}.drag_item_container input:checked~.drag_item_content .drag_item{border-color:#00f}.drag_item_wrapper{cursor:move;position:relative}.drag_item_wrapper:hover{z-index:10}.drag_item_wrapper.dragging{opacity:.5}.drag_item_wrapper.multi-dragging{opacity:.6}.drag_item_container input:checked~.drag_item_content{position:relative}.drag_item_container input:checked~.drag_item_content>div{box-shadow:0 0 0 1px #667eea}.drag_item_container input:checked~.drag_item_content:hover:before{background:#667eea1a}.drag_item_wrapper.drag-over{border-top:3px solid #4CAF50;padding-top:5px}.cursor-pointer{cursor:pointer}.h-100{height:100%}.w-100{width:100%}.d-flex{display:flex}.flex-col{flex-direction:column}.p-2{padding:.5rem}.center_title{text-align:center}.dragging-board{opacity:.4}.board-drag-over{border:2px dashed #4CAF50;border-radius:.375rem;box-sizing:border-box}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "react-drag-drop-kanban",
+  "version": "1.0.0",
+  "description": "React 18/19 drag and drop component with native HTML5 APIs - multiple columns support",
+  "keywords": [
+    "React drag and drop",
+    "Drag and drop",
+    "Multiple drag and drop",
+    "Multi drag drop",
+    "React multiple drag drop",
+    "React multiple box drag drop",
+    "React horizontal and vertical drag and drop",
+    "Javascript drag and drop",
+    "React drag and drop multiple",
+    "React drag",
+    "React dnd",
+    "React multiple dnd",
+    "Dnd",
+    "Kanban board",
+    "Kanban board dnd"
+  ],
+  "author": "Bibin antony",
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "files": [
+    "build/*.js",
+    "build/*.js.map",
+    "build/*.css",
+    "README.md"
+  ],
+  "homepage": "https://bibinantony1998.github.io/react-drag-and-drop-multiple",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bibinantony1998/react-drag-and-drop-multiple.git"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "gh-pages": "^6.3.0",
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rollup": "^4.28.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "sass": "^1.83.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.5",
+    "vitest": "^2.1.8"
+  },
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build --config vite.config.lib.ts",
+    "build:demo": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "deploy": "npm run build:demo && gh-pages -d dist",
+    "prepublishOnly": "npm run build"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
+  },
+  "license": "ISC"
+}