react-tiny-drag-drop

This aims to implement a simple, yet fully functional, drag and drop functionality for React.

Installation

npm install react-tiny-drag-drop

Usage

Working example: https://codesandbox.io/s/react-tiny-drag-drop-zg7mr

Usage

import React from 'react';
import {Draggable, Droppable} from "react-tiny-drag-drop";

export function App(props) {
  const onDrop((i) => alert(i));
  return (
    <Droppable context="item" onDrop={onDrop}><div>Drop here...</div></Droppable>
    <Draggable context="item" dataKey={1}>Item 1</Draggable>
    <Draggable context="item" dataKey={2}>Item 2</Draggable>
  );    
}

<Draggable> Component

Wrap around any object that should be draggable. | Property | Type | Description | Default | | ----------------- |--------- |------------------------------------------------------------------- | ------------------| | context | string | Use context to pair Draggable and Droppable objects | | | dataKey | string | Value that will be sent to the Droppable.onDrop() event callback | | | disabled | boolean | Set to true to disable functionality | false | | onDragEnd | function | Callback function for onDragEnd events (when dragging stops) | (dataKey) => {} |

<Droppable> Component

| Property | Type | Description | Default | ----------------- |--------- |----------------------------------------------------------------------------------------------------- | --- | context | string | Use context to pair Draggable and Droppable objects | null | disabled | boolean | Set to true to disable functionality | false | onDragOver | function | Callback function for onDragOver events (when any Draggable is dragged over this Droppable) | (dataKey, dataContext, context) => {} | onDrop | function | Callback function for onDrop events (when a Draggable in the same context is dropped) | (dataKey, context) => {}

Contribute and build

Contribute to this repository by sending pull requests my way! All help is welcome!

Make sure you have webpack installed on your host machine.

npm run-script build

Use npm link to link to a local frontend react project to be able to modify and test immediately.