dragginit

1.1.3 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i dragginit

Weekly Downloads

0

Version

1.1.3

License

MIT

Unpacked Size

24.4 kB

Total Files

6

Last publish

Collaborators

  • shipyards