ray-dragany
v1.0.0
Published
amos ui component
Downloads
4
Readme
ray-dragany
can drag everything
`` key words
- drag
- react
- HtmlElement
##useage
npm install --save ray-dragany
Example
/** @jsx React.DOM */
var React = require('react'),
Dragany = require('ray-dragany');
var App = React.createClass({
handleStart: function (event, ui) {
console.log('Event: ', event);
console.log('Position: ', ui.position);
},
handleDrag: function (event, ui) {
console.log('Event: ', event);
console.log('Position: ', ui.position);
},
handleStop: function (event, ui) {
console.log('Event: ', event);
console.log('Position: ', ui.position);
},
render: function () {
return (
// <Dragany/> transparently adds dragany interactivity
// to whatever element is supplied as `this.props.children`.
// Only a single element is allowed or an Error will be thrown.
//
// `axis` determines which axis the dragany can move.
// - 'both' allows movement horizontally and vertically (default).
// - 'x' limits movement to horizontal axis.
// - 'y' limits movement to vertical axis.
//
// `handle` specifies a selector to be used as the handle that initiates drag.
//
// `cancel` specifies a selector to be used to prevent drag initialization.
//
// `bound` determines whether to bound the movement to the parent box.
// - 'top' bounds movement to the top edge of the parent box.
// - 'right' bounds movement to the right edge of the parent box.
// - 'bottom' bounds movement to the bottom edge of the parent box.
// - 'left' bounds movement to the left edge of the parent box.
// - 'all' bounds movement to all edges (default if not specified).
// - 'point' to constrain only the top-left corner.
// - 'box' to constrain the entire box (default if not specified).
//
// `constrain` takes a function to constrain the dragging.
//
// `start` specifies the x and y that the dragged item should start at
//
// `zIndex` specifies the zIndex to use while dragging.
//
// `onStart` is called when dragging starts.
//
// `onDrag` is called while dragging.
//
// `onStop` is called when dragging stops.
<Dragany
axis="x"
handle=".handle"
constrain={constrain(25)}
start={{x: 25, y: 25}}
bound="all box"
zIndex={100}
onStart={this.handleStart}
onDrag={this.handleDrag}
onStop={this.handleStop}>
<div>
<div className="handle">Drag from here</div>
<div>Lorem ipsum...</div>
</div>
</Dragany>
);
}
});
function constrain (snap) {
function constrainOffset (offset, prev) {
var delta = offset - prev;
if (Math.abs(delta) >= snap) {
return prev + parseInt(delta / snap, 10) * snap;
}
return prev;
}
return function (pos) {
return {
top: constrainOffset(pos.top, pos.prevTop),
left: constrainOffset(pos.left, pos.prevLeft)
};
};
}
React.renderComponent(<App/>, document.body);
License
MIT