react-simple-draggable v1.0.1

react-simple-draggable

Description

This is s pure and simple draggable component for react.

How to use

import React from "react";
import Draggable from "react-simple-draggable";

class XXX extends React.Component {
  render() {
    let controll = {
        left:XXX,
        right:XXX,
        top:XXX,
        buttom:XXX,
    };
    return (
      <Draggable controled={controll}>
        <div></div>
      </Draggable>
    );
  }
}

See the demo

###Tips

If you use it to contain your another component ,you can get a couple of value of position and you can get them by props

import React from "react";
import Draggable from "react-simple-draggable";

class XXX extends React.Component {
  render() {
    let controll = {
        left:XXX,
        right:XXX,
        top:XXX,
        buttom:XXX,
    };
    return (
      <Draggable controled={controll}>
         <yourComponent></yourComponent>
      </Draggable>
    );
  }
}

import React from "react";
import Draggable from "react-simple-draggable";

class yourComponent extends React.Component {
  constructor() {
    super();
  }
  render() {
    const { x, y } = this.props.movedPosition
    return (
        ...
    );
  }
}