{"_id":"react-draggable2","_rev":"3144081","name":"react-draggable2","description":"React draggable component","dist-tags":{"latest":"0.7.0-alpha1"},"maintainers":[{"name":"mikepb","email":""}],"time":{"modified":"2023-11-27T06:58:04.000Z","created":"2014-12-08T06:45:16.339Z","0.7.0-alpha1":"2015-10-03T16:47:05.933Z","0.6.0":"2015-06-24T12:49:48.905Z","0.5.1":"2015-03-06T00:14:24.476Z","0.5.0":"2015-03-05T15:39:55.076Z","0.4.3":"2015-03-03T14:27:25.080Z","0.4.2":"2014-12-23T21:19:50.900Z","0.4.1":"2014-12-08T06:45:16.339Z"},"users":{},"author":{"name":"Matt Zabriskie"},"repository":{"type":"git","url":"git+https://github.com/mikepb/react-draggable.git"},"versions":{"0.7.0-alpha1":{"name":"react-draggable2","version":"0.7.0-alpha1","description":"React draggable component","main":"lib/draggable.js","scripts":{"test":"karma start --single-run","prepublish":"webpack lib/draggable.js dist/react-draggable.js && webpack --optimize-minimize lib/draggable.js dist/react-draggable.min.js"},"repository":{"type":"git","url":"git+https://github.com/mikepb/react-draggable.git"},"keywords":["react","draggable","react-component"],"author":{"name":"Matt Zabriskie"},"contributors":[{"name":"Michael Phan-Ba","email":"michael@mikepb.com"}],"license":"MIT","bugs":{"url":"https://github.com/mikepb/react-draggable/issues"},"homepage":"https://github.com/mikepb/react-draggable","devDependencies":{"jasmine":"^2.3.2","jasmine-core":"^2.3.4","jsx-loader":"*","karma":"^0.13.3","karma-chrome-launcher":"^0.2.0","karma-cli":"^0.1.1","karma-jasmine":"^0.3.6","karma-webpack":"^1.7.0","node-libs-browser":"^0.5.2","react":"0.14.0-rc1","react-dom":"^0.14.0-rc1","react-tools":"^0.13.3","webpack":"^1.12.2"},"dependencies":{"classnames":"^2.1.5","object-assign":"^4.0.1","react-addons-pure-render-mixin":"^0.14.0-rc1","react-addons-test-utils":"^0.14.0-rc1"},"gitHead":"8f87362062db1072731827578b737f261353bfd2","_id":"react-draggable2@0.7.0-alpha1","_shasum":"5d4f9d1e6618ecbe6bddc97760758c1ec26bbb7e","_from":".","_npmVersion":"2.14.2","_nodeVersion":"4.0.0","_npmUser":{"name":"mikepb","email":"michael@mikepb.com"},"maintainers":[{"name":"mikepb","email":""}],"dist":{"shasum":"5d4f9d1e6618ecbe6bddc97760758c1ec26bbb7e","size":38448,"noattachment":false,"key":"/react-draggable2/-/react-draggable2-0.7.0-alpha1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-draggable2/download/react-draggable2-0.7.0-alpha1.tgz"},"directories":{},"publish_time":1443890825933,"_hasShrinkwrap":false,"_cnpm_publish_time":1443890825933,"_cnpmcore_publish_time":"2021-12-16T18:02:30.401Z"},"0.6.0":{"name":"react-draggable2","version":"0.6.0","description":"React draggable component","main":"lib/draggable.js","scripts":{"test":"karma start --single-run","prepublish":"webpack lib/draggable.js dist/react-draggable.js && webpack --optimize-minimize lib/draggable.js dist/react-draggable.min.js"},"repository":{"type":"git","url":"git+https://github.com/mikepb/react-draggable.git"},"keywords":["react","draggable","react-component"],"author":{"name":"Matt Zabriskie"},"contributors":[{"name":"Michael Phan-Ba","email":"michael@mikepb.com"}],"license":"MIT","bugs":{"url":"https://github.com/mikepb/react-draggable/issues"},"homepage":"https://github.com/mikepb/react-draggable","devDependencies":{"jsx-loader":"*","karma":"^0.12.37","karma-chrome-launcher":"^0.2.0","karma-cli":"^0.0.4","karma-jasmine":"^0.3.5","karma-webpack":"^1.5.1","node-libs-browser":"^0.5.2","react":"^0.13.0","react-tools":"^0.13.3","webpack":"^1.9.11"},"gitHead":"28bbe0859da4fac32a5f1f8a1095b164bc6dede2","_id":"react-draggable2@0.6.0","_shasum":"37053d617e047e875000936928e382ed190c9bb6","_from":".","_npmVersion":"2.11.0","_nodeVersion":"2.2.1","_npmUser":{"name":"mikepb","email":"michael@mikepb.com"},"maintainers":[{"name":"mikepb","email":""}],"dist":{"shasum":"37053d617e047e875000936928e382ed190c9bb6","size":29577,"noattachment":false,"key":"/react-draggable2/-/react-draggable2-0.6.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-draggable2/download/react-draggable2-0.6.0.tgz"},"directories":{},"publish_time":1435150188905,"_hasShrinkwrap":false,"_cnpm_publish_time":1435150188905,"_cnpmcore_publish_time":"2021-12-16T18:02:30.852Z"},"0.5.1":{"name":"react-draggable2","version":"0.5.1","description":"React draggable component","main":"lib/draggable.js","scripts":{"test":"karma start --single-run","prepublish":"webpack lib/draggable.js dist/react-draggable.js && webpack --optimize-minimize lib/draggable.js dist/react-draggable.min.js"},"repository":{"type":"git","url":"https://github.com/mikepb/react-draggable.git"},"keywords":["react","draggable","react-component"],"author":{"name":"Matt Zabriskie"},"contributors":[{"name":"Michael Phan-Ba","email":"michael@mikepb.com"}],"license":"MIT","bugs":{"url":"https://github.com/mikepb/react-draggable/issues"},"homepage":"https://github.com/mikepb/react-draggable","devDependencies":{"jsx-loader":"^0.12.2","karma":"^0.12.31","karma-chrome-launcher":"^0.1.7","karma-cli":"^0.0.4","karma-jasmine":"^0.3.5","karma-webpack":"^1.5.0","react":"^0.12.2","react-tools":"^0.12.2","webpack":"^1.6.0"},"gitHead":"e736a6fb3d3d74f127e14b791570d938ad48d69b","_id":"react-draggable2@0.5.1","_shasum":"1bc8f65929f9d1a1e43267f894e76ab4af8ea387","_from":".","_npmVersion":"2.5.1","_nodeVersion":"1.2.0","_npmUser":{"name":"mikepb","email":"michael@mikepb.com"},"maintainers":[{"name":"mikepb","email":""}],"dist":{"shasum":"1bc8f65929f9d1a1e43267f894e76ab4af8ea387","size":21912,"noattachment":false,"key":"/react-draggable2/-/react-draggable2-0.5.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-draggable2/download/react-draggable2-0.5.1.tgz"},"directories":{},"publish_time":1425600864476,"_hasShrinkwrap":false,"_cnpm_publish_time":1425600864476,"_cnpmcore_publish_time":"2021-12-16T18:02:31.059Z"},"0.5.0":{"name":"react-draggable2","version":"0.5.0","description":"React draggable component","main":"lib/draggable.js","scripts":{"test":"karma start --single-run","prepublish":"webpack lib/draggable.js dist/react-draggable.js && webpack --optimize-minimize lib/draggable.js dist/react-draggable.min.js"},"repository":{"type":"git","url":"https://github.com/mikepb/react-draggable.git"},"keywords":["react","draggable","react-component"],"author":{"name":"Matt Zabriskie"},"contributors":[{"name":"Michael Phan-Ba","email":"michael@mikepb.com"}],"license":"MIT","bugs":{"url":"https://github.com/mikepb/react-draggable/issues"},"homepage":"https://github.com/mikepb/react-draggable","peerDependencies":{"react":"^0.12.2"},"devDependencies":{"jsx-loader":"^0.12.2","karma":"^0.12.31","karma-chrome-launcher":"^0.1.7","karma-cli":"^0.0.4","karma-jasmine":"^0.3.5","karma-webpack":"^1.5.0","react":"^0.12.2","react-tools":"^0.12.2","webpack":"^1.6.0"},"gitHead":"e736a6fb3d3d74f127e14b791570d938ad48d69b","_id":"react-draggable2@0.5.0","_shasum":"6262c880b82da32595ac7df74ed1684b2c93fb02","_from":".","_npmVersion":"2.5.1","_nodeVersion":"1.2.0","_npmUser":{"name":"mikepb","email":"michael@mikepb.com"},"maintainers":[{"name":"mikepb","email":""}],"dist":{"shasum":"6262c880b82da32595ac7df74ed1684b2c93fb02","size":21845,"noattachment":false,"key":"/react-draggable2/-/react-draggable2-0.5.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-draggable2/download/react-draggable2-0.5.0.tgz"},"directories":{},"publish_time":1425569995076,"_hasShrinkwrap":false,"_cnpm_publish_time":1425569995076,"_cnpmcore_publish_time":"2021-12-16T18:02:31.271Z"},"0.4.3":{"name":"react-draggable2","version":"0.4.3","description":"React draggable component","main":"index.js","scripts":{"test":"script/test --single-run","start":"script/build"},"browserify":{"transform":["reactify"]},"repository":{"type":"git","url":"https://github.com/mikepb/react-draggable.git"},"keywords":["react","draggable","react-component"],"author":{"name":"Matt Zabriskie"},"contributors":[{"name":"Michael Phan-Ba","email":"michael@mikepb.com"}],"license":"MIT","bugs":{"url":"https://github.com/mikepb/react-draggable/issues"},"homepage":"https://github.com/mikepb/react-draggable","devDependencies":{"jsx-loader":"^0.12.2","karma":"^0.12.31","karma-chrome-launcher":"^0.1.7","karma-cli":"^0.0.4","karma-jasmine":"^0.3.5","karma-webpack":"^1.5.0","react":"^0.12.2","uglify-js":"^2.4.16","webpack":"^1.6.0","webpack-dev-server":"^1.6.6"},"gitHead":"3fac7cde11a2ef8e08a31f1acf184285d169076a","_id":"react-draggable2@0.4.3","_shasum":"f61186e5f5e85c86994979c1f8889ef44b508849","_from":".","_npmVersion":"2.5.1","_nodeVersion":"1.2.0","_npmUser":{"name":"mikepb","email":"michael@mikepb.com"},"maintainers":[{"name":"mikepb","email":""}],"dist":{"shasum":"f61186e5f5e85c86994979c1f8889ef44b508849","size":23382,"noattachment":false,"key":"/react-draggable2/-/react-draggable2-0.4.3.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-draggable2/download/react-draggable2-0.4.3.tgz"},"directories":{},"publish_time":1425392845080,"_hasShrinkwrap":false,"_cnpm_publish_time":1425392845080,"_cnpmcore_publish_time":"2021-12-16T18:02:31.579Z"},"0.4.2":{"name":"react-draggable2","version":"0.4.2","description":"React draggable component","main":"index.js","scripts":{"test":"script/test --single-run","start":"script/build"},"browserify":{"transform":["reactify"]},"repository":{"type":"git","url":"https://github.com/mikepb/react-draggable.git"},"keywords":["react","draggable","react-component"],"author":{"name":"Matt Zabriskie"},"contributors":[{"name":"Michael Phan-Ba","email":"michael@mikepb.com"}],"license":"MIT","bugs":{"url":"https://github.com/mikepb/react-draggable/issues"},"homepage":"https://github.com/mikepb/react-draggable","peerDependencies":{"react":"^0.12.1"},"devDependencies":{"jsx-loader":"^0.12.2","karma":"^0.12.25","karma-chrome-launcher":"^0.1.5","karma-cli":"^0.0.4","karma-jasmine":"^0.3.1","karma-webpack":"^1.3.1","uglify-js":"^2.4.15","webpack":"^1.4.13","webpack-dev-server":"^1.6.6"},"gitHead":"fef33d976ad8174edb46321b3b5b9ddfe5d6fb7e","_id":"react-draggable2@0.4.2","_shasum":"c55f2b5ca112cc799fa3b1d5dee2a2e6f22d82db","_from":".","_npmVersion":"2.1.9","_nodeVersion":"0.10.33","_npmUser":{"name":"mikepb","email":"michael@mikepb.com"},"maintainers":[{"name":"mikepb","email":""}],"dist":{"shasum":"c55f2b5ca112cc799fa3b1d5dee2a2e6f22d82db","size":23309,"noattachment":false,"key":"/react-draggable2/-/react-draggable2-0.4.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-draggable2/download/react-draggable2-0.4.2.tgz"},"directories":{},"publish_time":1419369590900,"_hasShrinkwrap":false,"_cnpm_publish_time":1419369590900,"_cnpmcore_publish_time":"2021-12-16T18:02:31.806Z"},"0.4.1":{"name":"react-draggable2","version":"0.4.1","description":"React draggable component","main":"index.js","scripts":{"test":"script/test --single-run","start":"script/build"},"browserify":{"transform":["reactify"]},"repository":{"type":"git","url":"https://github.com/mikepb/react-draggable.git"},"keywords":["react","draggable","react-component"],"author":{"name":"Matt Zabriskie"},"contributors":[{"name":"Michael Phan-Ba","email":"michael@mikepb.com"}],"license":"MIT","bugs":{"url":"https://github.com/mikepb/react-draggable/issues"},"homepage":"https://github.com/mikepb/react-draggable","peerDependencies":{"react":"^0.12.1"},"devDependencies":{"jsx-loader":"^0.12.2","karma":"^0.12.25","karma-chrome-launcher":"^0.1.5","karma-cli":"^0.0.4","karma-jasmine":"^0.3.1","karma-webpack":"^1.3.1","uglify-js":"^2.4.15","webpack":"^1.4.13","webpack-dev-server":"^1.6.6"},"gitHead":"5d5123eb41e50a82c6d4264183582483b6a0472d","_id":"react-draggable2@0.4.1","_shasum":"25635446188e89da41fc01233e3396aa1e8ec6d5","_from":".","_npmVersion":"2.1.9","_nodeVersion":"0.10.33","_npmUser":{"name":"mikepb","email":"michael@mikepb.com"},"maintainers":[{"name":"mikepb","email":""}],"dist":{"shasum":"25635446188e89da41fc01233e3396aa1e8ec6d5","size":22471,"noattachment":false,"key":"/react-draggable2/-/react-draggable2-0.4.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-draggable2/download/react-draggable2-0.4.1.tgz"},"directories":{},"publish_time":1418021116339,"_hasShrinkwrap":false,"_cnpm_publish_time":1418021116339,"_cnpmcore_publish_time":"2021-12-16T18:02:32.000Z"}},"readme":"# react-draggable [![Build Status](https://travis-ci.org/mikepb/react-draggable.svg?branch=master)](https://travis-ci.org/mikepb/react-draggable)\n\nReact draggable component\n\nBased on https://github.com/mzabriskie/react-draggable\n\n## Installing\n\n```bash\n$ npm install react react-draggable2\n```\n\nYou will also need install React to your top-level project due to\n[#2](https://github.com/mzabriskie/react-draggable/issues/22).\n\n## Demo\n\nhttp://mzabriskie.github.io/react-draggable/example/\n\n## Example\n\n```js\n/** @jsx React.DOM */\nvar React = require('react'),\n\tDraggable = require('react-draggable');\n\nvar App = React.createClass({\n\thandleStart: function (event, ui) {\n\t\tconsole.log('Event: ', event);\n\t\tconsole.log('Position: ', ui.position);\n\t},\n\n\thandleDrag: function (event, ui) {\n\t\tconsole.log('Event: ', event);\n        console.log('Position: ', ui.position);\n\t},\n\n\thandleStop: function (event, ui) {\n\t\tconsole.log('Event: ', event);\n        console.log('Position: ', ui.position);\n\t},\n\n\trender: function () {\n\t\treturn (\n\t\t\t// <Draggable/> transparently adds draggable interactivity\n\t\t\t// to whatever element is supplied as `this.props.children`.\n\t\t\t// Only a single element is allowed or an Error will be thrown.\n\t\t\t//\n\t\t\t// `axis` determines which axis the draggable can move.\n\t\t\t// - 'both' allows movement horizontally and vertically (default).\n\t\t\t// - 'x' limits movement to horizontal axis.\n\t\t\t// - 'y' limits movement to vertical axis.\n\t\t\t//\n\t\t\t// `handle` specifies a selector to be used as the handle that initiates drag.\n\t\t\t//\n\t\t\t// `cancel` specifies a selector to be used to prevent drag initialization.\n\t\t\t//\n\t\t\t// `bound` determines whether to bound the movement to the parent box.\n\t\t\t// - 'top' bounds movement to the top edge of the parent box.\n\t\t\t// - 'right' bounds movement to the right edge of the parent box.\n\t\t\t// - 'bottom' bounds movement to the bottom edge of the parent box.\n\t\t\t// - 'left' bounds movement to the left edge of the parent box.\n\t\t \t// - 'all' bounds movement to all edges (default if not specified).\n\t\t\t// - 'point' to constrain only the top-left corner.\n\t\t\t// - 'box' to constrain the entire box (default if not specified).\n\t\t\t//\n\t\t\t// `constrain` takes a function to constrain the dragging.\n\t\t\t//\n\t\t\t// `start` specifies the x and y that the dragged item should start at\n\t\t\t//\n\t\t\t// `zIndex` specifies the zIndex to use while dragging.\n\t\t\t//\n\t\t\t// `onStart` is called when dragging starts.\n\t\t\t//\n\t\t\t// `onDrag` is called while dragging.\n\t\t\t//\n\t\t\t// `onStop` is called when dragging stops.\n\n\t\t\t<Draggable\n\t\t\t\taxis=\"x\"\n\t\t\t\thandle=\".handle\"\n\t\t\t\tconstrain={constrain(25)}\n\t\t\t\tstart={{x: 25, y: 25}}\n\t\t\t\tbound=\"all box\"\n\t\t\t\tzIndex={100}\n\t\t\t\tonStart={this.handleStart}\n\t\t\t\tonDrag={this.handleDrag}\n\t\t\t\tonStop={this.handleStop}>\n\t\t\t\t<div>\n\t\t\t\t\t<div className=\"handle\">Drag from here</div>\n\t\t\t\t\t<div>Lorem ipsum...</div>\n\t\t\t\t</div>\n\t\t\t</Draggable>\n\t\t);\n\t}\n});\n\nfunction constrain (snap) {\n  function constrainOffset (offset, prev) {\n    var delta = offset - prev;\n    if (Math.abs(delta) >= snap) {\n      return prev + parseInt(delta / snap, 10) * snap;\n    }\n    return prev;\n  }\n  return function (pos) {\n    return {\n      top: constrainOffset(pos.top, pos.prevTop),\n      left: constrainOffset(pos.left, pos.prevLeft)\n    };\n  };\n}\n\nReact.renderComponent(<App/>, document.body);\n```\n\n## Contributing\n\n- Fork the project\n- `$ npm install && npm run watch`\n- Make changes\n- Add appropriate tests\n- `$ npm test`\n- If tests don't pass, make them pass.\n- Update README with appropriate docs.\n- Commit and PR\n\n## License\n\nMIT\n","_attachments":{},"homepage":"https://github.com/mikepb/react-draggable","bugs":{"url":"https://github.com/mikepb/react-draggable/issues"},"license":"MIT"}