react-dndzone
v0.1.0
Published
Simple Drag and Drop for react.
Downloads
10
Readme
Introduction
Javascript Library for drag and drop
Installation
npm i react-dndzone
Usage/Examples
import DNDZone from 'react-dndzone'
function App(){
function onDragEnter(dragElement, dropElement){
...
}
function onDragLeave(dragElement, dropElement){
...
}
function onDrop(dragElement, dropElement){
...
}
return(
<DNDZone dragClass="drag" dropClass="drop" onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDrop={onDrop}>
<div style={{display:'grid', gridTemplateColumns:"1fr 1fr 1fr 1fr", columnGap:'4px'}}>
<div style={{width:"100px", height:"100px", background:"gray"}} className="drag">Drag 1!</div>
<div style={{width:"100px", height:"100px", background:"gray"}} className="drag">Drag 2!</div>
<div style={{width:"100px", height:"100px", background:"gray"}} className="drag">Drag 3!</div>
<div style={{width:"100px", height:"100px", background:"gray"}} className="drag">Drag 4!</div>
</div>
<div style={{marginTop:"24px", display:'grid', gridTemplateColumns:"1fr 1fr 1fr 1fr", columnGap:'4px'}}>
<div style={{width:"100px", height:"100px", background:"blue"}} className="drop">drop 1!</div>
<div style={{width:"100px", height:"100px", background:"blue"}} className="drop">drop 2!</div>
<div style={{width:"100px", height:"100px", background:"blue"}} className="drop">drop 3!</div>
<div style={{width:"100px", height:"100px", background:"blue"}} className="drop">drop 4!</div>
</div>
</DNDZone>
)
}
Documentation
| Prop Name | Description | Default |
| :----------- | :-------------------------------------------- | :------------------------- |
| dragClass*
| className of elements that need to be dragged!type=string
| -
|
| dropClass*
| className of elements on which the drag element is dropped!type=string
| -
|
| revert
| If this value is set to false, the drag item will not revert to its initial position upon being dropped!type=boolean
| true
|
| dragZIndex
| This specifies the initial z-index value of the drag item when it is being dragged!type=number
| 1000
|
| onDrop
| This function will execute when the drag item is dropped onto the drop item!((dragItem: HTMLElement, drapItem: HTMLElement) => void) \| null
| -
|
| onDragEnter
| This function will execute when the drag item enters over the drop item!((dragItem: HTMLElement, drapItem: HTMLElement) => void) \| null
| -
|
| onDragLeave
| This function will execute when the drag item is no longer over the drop item!((dragItem: HTMLElement, drapItem: HTMLElement) => void) \| null
| -
|