dragginit

Simple react component to allow drag and drop

Usage no npm install needed!

<script type="module">
  import dragginit from 'https://cdn.skypack.dev/dragginit';
</script>

README

dragginit

Simple react component to allow drag and drop based on the html drag and drop

NPM JavaScript Style Guide

Install

npm install --save dragginit

Usage

import { Draggable, Droppable } from 'dragginit'

Basic usage

<Draggable onDrag={handler}>
  <div>I can now be moved around!</div>
</Draggable>

<Droppable onDrop={handler}>
  <div>I accept draggable items</div>
</Droppable>

Enable Droppable components to drag

<Droppable onDrop={dropHandler} canDrop onDrag={dragHandler}>
  <div>I accept draggable items</div>
</Droppable>

Drag a custom src image, by default draggale components dont drag and image.

<Draggable src="/path/to/basic/imgurl">
  <div>I can now be moved around!</div>
</Draggable>

Edit Draggable and Droppable Styles.

<Droppable styles={border: '1px solid red'}>
  <div>I can dropped and you can style me how you want!</div>
</Droppable>

<Draggable styles={border: '1px solid red'}>
  <div>I can now be moved around, and you can style me how you want!</div>
</Draggable>

License

MIT © Shipyar