React-dndzone NPM

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`	`-`

License

MIT

React DND drag and drop

@everything-registry/sub-chunk-2551

0.1.0

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago