apeman-react-draggable

apeman react package for draggable component.

Installation

$ npm install apeman-react-draggable --save

Demo

Live demo is hosted on GitHub Pages.

Usage

'use strict'

import React from 'react'
import {ApDraggable, ApDraggableStyle} from 'apeman-react-draggable'

const ExampleComponent = React.createClass({
  render () {
    return (
      <div>
        <ApDraggableStyle/>
        <ApDraggable onStart={ () => {

                } }
                     onMove={ () => {

                 } }
                     onEnd={ () => {

                 } }
                     direction="ALL">
          <div>Drag me!</div>
        </ApDraggable>
      </div>
    )
  }
})

Components

ApDraggableStyle

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | style | object | {} | | |

ApDraggable

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | onStart | func | | | Handler for drag start | | onMove | func | | | Handler for drag move | | onStop | func | | | Handler for drag stop | | shouldMove | func | function() { return true } | | | | direction | enum | 'ALL' | | Move direction | | x | number | | | | | minX | number | Number.MIN_SAFE_INTEGER || (-9007199254740991) | | | | maxX | number | Number.MAX_SAFE_INTEGER || (9007199254740991) | | | | y | number | | | | | minY | number | Number.MIN_SAFE_INTEGER || (-9007199254740991) | | | | maxY | number | Number.MAX_SAFE_INTEGER || (9007199254740991) | | |

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | onStart | function | | Callback when drag started. | | onMove | function | | Callback when drag moved. | | onStop | function | | Callback when drag stopped. | | shouldMove | function | | Called when drag moved. Returns false to cancel moving. | | direction | string | | Move direction. | | x | number | | X position. | | minX | number | MIN_SAFE_INTEGER | Min x position. | | maxX | number | MAX_SAFE_INTEGER | Max x position. | | y | number | | Y potion. | | minY | number | MIN_SAFE_INTEGER | Min y position. | | maxY | number | MAX_SAFE_INTEGER | Max y position. |

Directions

License

This software is released under the MIT License.

Links

• apeman
• apeman-react-labo
• React