Kendo UI Draggable React Component
A higher-order react component that wraps the Kendo Draggable abstraction.
Installation
The library is published as a public scoped NPM package in the Telerik organization in http://npmjs.org/.
Install it using NPM:
npm install --save @telerik/kendo-react-draggable;
Once installed, import the module:
// ES2015 module syntax
import Draggable from '@telerik/kendo-react-draggable';
// CommonJS format
var Draggable = require('@telerik/kendo-react-draggable');
Basic Usage
<div id="app"></div>
import * as React from 'react';
import ReactDOM from 'react-dom';
import Draggable from '@telerik/kendo-react-draggable';
class Component extends React.Component {
static propTypes = {
pageX: React.PropTypes.number,
pageY: React.PropTypes.number,
pressed: React.PropTypes.bool
};
constructor(props) {
super(props);
}
render() {
if (this.props.pressed) {
return (<div {...this.props} style={{ color: "red" }}>
<div>PageX: {this.props.pageX}</div>
<div>PageY: {this.props.pageY}</div>
</div>);
}
return <span>Press me</span>;
}
}
const DraggableComponent = Draggable(Component);
ReactDOM.render(
<DraggableComponent />,
document.getElementById('app')
);
For more information about the underlying draggable implementation, check the kendo draggable package README.