Rasoul678/dragdropme

Drag and Drop Package

It is simple React drag and drop package.

Live Demo

Installation:

npm install dragdropme --save-dev

or

yarn add -D dragdropme

Usage :

Add DnDMaker to your component:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { DnDMaker } from 'dragdropme'

const rootElement = document.getElementById('root') as HTMLElement;
const root = ReactDOM.createRoot(rootElement);

const Javascript = () => <div>This a react component</div>

const items = {
  'group one' : [{ id: '1', value: <Javascript /> }],
  'group two' : [{ id: '2', value: 'Typescript' }],
  'group three' : [{ id: '3', value: 'ReactJS' }],
  'group four' : [{ id: '4', value: 'NextJS' }],
  'group five' : [{ id: '5', value: 'VueJS' }],
}

const DnDItem = ({ item }) => (<div>{item?.value}</div>);

root.render(
    <React.StrictMode>
        <DnDMaker
          items={items}
          renderItem={<DnDItem />}
          animation={{
            enable: true,
            duration: 200
          }}/>
    </React.StrictMode>,
)