Skip to content

Commit 2cbc402

Browse files
mzabriskiemzabriskie
committed
first commit
0 parents  commit 2cbc402

File tree

11 files changed

+146
-0
lines changed

11 files changed

+146
-0
lines changed

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.idea
2+
*.iml
3+
build/
4+
node_modules/

‎.npmignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
idea
2+
*.iml
3+
build
4+
example
5+
script
6+
specs
7+
webpack.config.js

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# react-draggable
2+
3+
React draggable component

‎example/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>React Draggable</title>
6+
<link rel="stylesheet" type="text/css" href="../lib/styles.css"/>
7+
<style type="text/css">
8+
.foo {
9+
background: #fff;
10+
border: 1px solid #333;
11+
width: 150px;
12+
height: 150px;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<script src="../build/bundle.js"></script>

‎example/main.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/** @jsx React.DOM */
2+
var React = require('react'),
3+
Draggable = require('../lib/main');
4+
5+
React.renderComponent(<div>
6+
<Draggable>
7+
<div className="foo">Hello</div>
8+
</Draggable>
9+
<Draggable>
10+
<div className="foo">World</div>
11+
</Draggable>
12+
</div>, document.body);

‎lib/draggable.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/** @jsx React.DOM */
2+
var React = require('react');
3+
4+
module.exports = React.createClass({
5+
getInitialState: function () {
6+
return {
7+
startX: 0, startY: 0,
8+
offsetX: 0, offsetY: 0,
9+
clientX: 0, clientY: 0
10+
};
11+
},
12+
13+
handleMouseDown: function (e) {
14+
var node = this.getDOMNode();
15+
this.setState({
16+
offsetX: e.clientX,
17+
offsetY: e.clientY,
18+
startX: parseInt(node.style.left, 10) || 0,
19+
startY: parseInt(node.style.top, 10) || 0
20+
});
21+
22+
window.addEventListener('mousemove', this.handleMouseMove);
23+
},
24+
25+
handleMouseUp: function (e) {
26+
window.removeEventListener('mousemove', this.handleMouseMove);
27+
},
28+
29+
handleMouseMove: function (e) {
30+
this.setState({
31+
clientX: (this.state.startX + (e.clientX - this.state.offsetX)),
32+
clientY: (this.state.startY + (e.clientY - this.state.offsetY))
33+
});
34+
},
35+
36+
render: function () {
37+
var style = {
38+
top: this.state.clientY,
39+
left: this.state.clientX
40+
};
41+
42+
return (
43+
<div style={style}
44+
className="react-draggable"
45+
onMouseUp={this.handleMouseUp}
46+
onMouseDown={this.handleMouseDown}>
47+
{this.props.children}
48+
</div>
49+
);
50+
}
51+
});

‎lib/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('./draggable');

‎lib/styles.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.react-draggable {
2+
cursor: move;
3+
display: inline-block;
4+
position: relative;
5+
-webkit-user-select: none;
6+
-moz-user-select: none;
7+
-ms-user-select: none;
8+
-o-user-select: none;
9+
user-select: none;
10+
}

‎package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "react-draggable",
3+
"version": "0.0.0",
4+
"description": "React draggable component",
5+
"main": "lib/main.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"build": "script/build"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "https://github.com/mzabriskie/react-draggable.git"
13+
},
14+
"keywords": [
15+
"react",
16+
"draggable"
17+
],
18+
"author": "Matt Zabriskie",
19+
"license": "MIT",
20+
"bugs": {
21+
"url": "https://github.com/mzabriskie/react-draggable/issues"
22+
},
23+
"homepage": "https://github.com/mzabriskie/react-draggable",
24+
"devDependencies": {
25+
"react": "^0.11.0",
26+
"jsx-loader": "^0.11.0"
27+
}
28+
}

‎script/build‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
#!/bin/sh
2+
webpack --watch --devtool inline-source-map

0 commit comments

Comments
 (0)