https://github.com/megaputer/react-redrag
Draggable, Droppable, and Sortable components for React
https://github.com/megaputer/react-redrag
drag-and-drop draggable droppable react sortable
Last synced: over 1 year ago
JSON representation
Draggable, Droppable, and Sortable components for React
- Host: GitHub
- URL: https://github.com/megaputer/react-redrag
- Owner: Megaputer
- License: mit
- Created: 2018-01-21T20:40:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-11T13:25:53.000Z (almost 3 years ago)
- Last Synced: 2025-01-21T07:43:53.679Z (over 1 year ago)
- Topics: drag-and-drop, draggable, droppable, react, sortable
- Language: TypeScript
- Homepage: https://megaputer.github.io/react-redrag/
- Size: 205 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-redrag
Yes, another one library to drag and drop. It written in [Typescript](http://www.typescriptlang.org/) for [React](https://facebook.github.io/react/) and containing `Draggable`, `Droppable` and `Sortable` components. Drag and Drop should be simple and pleasant!
## Example
[Basic usage examples.](https://megaputer.github.io/react-redrag/)
## API
#### `Draggable`
Drag source wrapper. May be used without any Droppable. Do not unmount component while dragging!
```typescript
interface DraggableProps {
/**
* Type (identifier) of dragged object. If not defined, `Draggable` doesn't interact with any Droppable.
*/
type?: DraggedType;
/**
* Element that shown while dragging near the mouse. If not defined, children will be shown.
*/
dragLayer?: React.ReactElement;
/**
* Data attached to draggable object. This data can be accessed by DndEvent handlers.
*/
dragData?: any;
/**
* Disables shifting drag layer.
* Shift value is difference between cursor position and left top point of the dragged element.
*/
disableShift?: boolean;
/**
* Specifies the drag threshold in pixels.
*/
dragThreshold?: number;
/**
* Called when drag started.
*/
onStart?: DndHandler;
/**
* Called while dragging.
*/
onDrag?: DndHandler;
/**
* Called when a drag ends.
*/
onEnd?: DndHandler;
}
```
#### `Droppable`
Drop target wrapper.
```typescript
interface DroppableProps {
/**
* Types (identifiers) that can accept Droppable. Callbacks will fire when `types` are equal.
*/
type: DraggedType | Array;
/**
* Custom data attached to droppable object.
*/
dropData?: any;
/**
* Called when a mouse is moved over the target.
*/
onEnter?: DndHandler;
/**
* Called when mouse leaves target.
*/
onLeave?: DndHandler;
/**
* Called when a mouse is moved over the target.
*/
onDragOver?: DndHandler;
/**
* Called when drop happens.
*/
onDrop?: DndHandler;
}
```
#### `DndEvent`
Drag & drop event
```typescript
interface DndEvent {
/**
* Type of dragged object, if not defined Draggable doesn't interact with Droppable
*/
type?: DraggedType;
pageX: number;
pageY: number;
clientX: number;
clientY: number;
target: EventTarget;
deltaX?: number;
deltaY?: number;
dragData?: any;
dropTarget?: Droppable;
ctrlKey?: boolean;
shiftKey?: boolean;
}
```
## `Sortable`
Helper component which able to reorder children.
```typescript
export interface SortableProps extends React.HTMLAttributes {
/**
* Make moved element invisible. As a dragged layer will be used clone of that element.
*/
hideDragged?: boolean;
/**
* Provide custom `Draggable`. In that case each child must be ready to accept `DraggableProps`.
*/
customDraggable?: boolean;
/**
* Called when dragging starts.
*/
onSortStart?: () => void;
/**
* Called when the drag is finished without any reorder.
*/
onSortCancel?: () => void;
/**
* Called when user has made some reorder.
*/
onSortEnd: (from: number, to: number) => void;
}
```