react-drag-and-drop-multiple-dynamic-column

React drag and drop multiple dynamic column

A multiple column draggable drag and drop

Inspired from React beautiful dnd

Just send a JSON in the given structure to create draggable and droppable column, the column will create as the length of the JSON that pass in props

demo

Live demo

Usage:

npm install react-drag-and-drop-multiple-dynamic-column

^{* Requires react as a peer dependency: npm install react}

import React from "react";
import { render } from "react-dom";
import ReactMDND from "react-drag-and-drop-multiple-dynamic-column";

const data = [
  {
    id: "1",
    name: "Drag drop 1",
    data: [
      {
        id: "1",
        value: "Test 1"
      },
      {
        id: "2",
        value: "Test 2"
      },
      {
        id: "3",
        value: "Test 3"
      },
    ]
  },
  {
    id: "2",
    name: "Drag drop 2",
    data: [
      {
        id: "5",
        value: "Test 4"
      },
      {
        id: "6",
        value: "Test 5"
      },
    ]
  },
  {
    id: "3",
    name: "Drag drop 3",
    data: [
      {
        id: "7",
        value: "Test 6"
      },
      {
        id: "8",
        value: "Test 7"
      },
    ]
  },
];

const App = () => (
    <App 
      onChange={(data) => console.log(data)}
      width="100%" 
      height={"100%"} 
      data={data} 
      multiple 
      draggerImg
      title
    />
);

render(<App />, document.body);

Props

Prop Name	Type	Default Value	Description
width	number/string	0	The width for dragger
height	number/string	0	The height for dragger
multiple	boolean	false	The items can select and drag in multiple
draggerImg	boolean	false	set an image in left side of drag item, (users to know its draggable)
title	boolean	false	to show title in dragging box
onChange	function		This Function will return the updated JSON

Bibin Antony

Limitations

• The multiple dragging item will not show when dragging (in the hold cursor mode)