Apeman-react-draggable NPM

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