Skip to content

Commit e8fc9e5

Browse files
committed
The start param is back. Fixes #52
1 parent a5d5983 commit e8fc9e5

File tree

3 files changed

+33
-1
lines changed

3 files changed

+33
-1
lines changed

README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@ var App = React.createClass({
8080
// - An object with left, top, right, and bottom properties. These indicate how far in each direction
8181
// the draggable can be moved. See example/index.html for more on this.
8282
//
83+
// `start` specifies the x and y that the dragged item should start at. This is generally not necessary
84+
// to use (you can use absolute or relative positioning of the child directly), but can be helpful
85+
// for uniformity in your callbacks and with css transforms.
86+
//
8387
// `zIndex` specifies the zIndex to use while dragging.
8488
//
8589
// `onStart` is called when dragging starts.

example/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,11 @@ <h1>React Draggable</h1>
130130
I already have an absolute position.
131131
</div>
132132
</Draggable>
133+
<Draggable start={{x: 25, y: 25}}>
134+
<div className="box">
135+
{"I have a start position of {x: 25, y: 25}, so I'm slightly offset."}
136+
</div>
137+
</Draggable>
133138
</div>
134139
);
135140
}

lib/draggable.js

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -364,6 +364,28 @@ module.exports = React.createClass({
364364
*/
365365
grid: React.PropTypes.arrayOf(React.PropTypes.number),
366366

367+
/**
368+
* `start` specifies the x and y that the dragged item should start at
369+
*
370+
* Example:
371+
*
372+
* ```jsx
373+
* var App = React.createClass({
374+
* render: function () {
375+
* return (
376+
* <Draggable start={{x: 25, y: 25}}>
377+
* <div>I start with transformX: 25px and transformY: 25px;</div>
378+
* </Draggable>
379+
* );
380+
* }
381+
* });
382+
* ```
383+
*/
384+
start: React.PropTypes.shape({
385+
x: React.PropTypes.number,
386+
y: React.PropTypes.number
387+
}),
388+
367389
/**
368390
* `zIndex` specifies the zIndex to use while dragging.
369391
*
@@ -466,6 +488,7 @@ module.exports = React.createClass({
466488
handle: null,
467489
cancel: null,
468490
grid: null,
491+
start: {x: 0, y: 0},
469492
zIndex: NaN,
470493
enableUserSelectHack: true,
471494
onStart: emptyFunction,
@@ -484,7 +507,7 @@ module.exports = React.createClass({
484507
offsetX: 0, offsetY: 0,
485508

486509
// Current transform x and y.
487-
clientX: 0, clientY: 0
510+
clientX: this.props.start.x, clientY: this.props.start.y
488511
};
489512
},
490513

0 commit comments

Comments
 (0)