{"_id":"react-draggable2","_rev":"19-bd111c6b6d0a6db805d8b5e1b1db7326","name":"react-draggable2","time":{"modified":"2022-06-25T20:32:14.481Z","created":"2014-12-08T06:43:45.154Z","0.4.0":"2014-12-08T06:43:45.154Z","0.4.1":"2014-12-08T06:45:16.339Z","0.4.2":"2014-12-23T21:19:50.900Z","0.4.3":"2015-03-03T14:27:25.080Z","0.5.0":"2015-03-05T15:39:55.076Z","0.5.1":"2015-03-06T00:14:24.476Z","0.6.0":"2015-06-24T12:49:48.905Z","0.7.0-alpha1":"2015-10-03T16:47:05.933Z"},"maintainers":[{"name":"mikepb","email":"michael@mikepb.com"}],"dist-tags":{"latest":"0.7.0-alpha1"},"description":"React draggable component","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","versions":{"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":"michael@mikepb.com"}],"dist":{"shasum":"25635446188e89da41fc01233e3396aa1e8ec6d5","tarball":"https://registry.npmjs.org/react-draggable2/-/react-draggable2-0.4.1.tgz","integrity":"sha512-c6aqVLhK1UgYchdkjUa0/QwogQ/MTVy1dR1P0fdDYc39kl/GVKScYu91AUK8eMFqm+hSBRnNLsI7F1g8KKTnVQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCk1atuPI0cakuPdCKz1Od+zyn7n0unWdICl4/s/Vv0UAIgePuI+41Pw728f6BmLNYCg53zqgF8n6yLmPynM/JsJsc="}]}},"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":"michael@mikepb.com"}],"dist":{"shasum":"c55f2b5ca112cc799fa3b1d5dee2a2e6f22d82db","tarball":"https://registry.npmjs.org/react-draggable2/-/react-draggable2-0.4.2.tgz","integrity":"sha512-LlcLVFQ/d7JfdLTWWbnsNHneHrRB8TrrUZ+KkytBeSSgsTbE1nAEr9Jf9xnLlXYd6zINmZI7M20e2d+nJYI8Cg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICtp2K2h9TKpiE15WGMm3FSuHllDGXJwceHS9RqBFs+nAiEAlc8JF3ZT2I/zKrRlT5olG6zrYj1cOCk/7GukATcMYb0="}]}},"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":"michael@mikepb.com"}],"dist":{"shasum":"f61186e5f5e85c86994979c1f8889ef44b508849","tarball":"https://registry.npmjs.org/react-draggable2/-/react-draggable2-0.4.3.tgz","integrity":"sha512-d3nwEnDFX0+mQhqV77BhWV8pIXfbp7fTVI9phOiBUvfX9YkOLmsLsmQPOThilDZWyw2L8kDAkBayvMGZr6GYCA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8/N6v7pYWnGWKTb49y4e6/6l/tu4A9VTIvov8THIxZQIgN8hlU9eejZCYzdjKYu0r6nXIl89FAf+0n3l7ccenvvI="}]}},"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":"michael@mikepb.com"}],"dist":{"shasum":"6262c880b82da32595ac7df74ed1684b2c93fb02","tarball":"https://registry.npmjs.org/react-draggable2/-/react-draggable2-0.5.0.tgz","integrity":"sha512-ITYsb1E5/nUgaLEhYPGwgPYHzGbIId0h7IZBOqTPpwFBD8cP5Agzohfs/SlaOW+u93v+oemuF42VIiuoEGX1ZQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCorFIX2k3kNRSeRIdMFztqoOXFWffrJ7I+NfXPKJXgBQIhAIAIBWWnFl2nraAlB5BVQ6oKIgOJ59IpocE/L9vq0bWA"}]}},"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":"michael@mikepb.com"}],"dist":{"shasum":"1bc8f65929f9d1a1e43267f894e76ab4af8ea387","tarball":"https://registry.npmjs.org/react-draggable2/-/react-draggable2-0.5.1.tgz","integrity":"sha512-Kk372rQSDd2zz/G7zerlobtvpeh1mvrq6+6OduGyqSyU4LzkTpXvgLFSp95qhNTd/SVmJJZq55fFDEt6bt0SqA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLPLAzSFW7QvUnlh5yxpDy5VmdG4N/T2bRYrmzdH1ZvAiB+AG7Rhzs+0et+5qYnjyVREXj8GenfsoRtlLNmWHXJAA=="}]}},"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":"michael@mikepb.com"}],"dist":{"shasum":"37053d617e047e875000936928e382ed190c9bb6","tarball":"https://registry.npmjs.org/react-draggable2/-/react-draggable2-0.6.0.tgz","integrity":"sha512-63oUCWmDwhNLQW2Atg0o1dCPC/qQF9FTiPx1iREdZR1iwYlY3PaQft+7OaUgJS/Vtc8YU+I1t9cBrRUAEfSa/g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArgs0I3hlSXDls3ex4YY8kRUtLwM/alak8/YhJ/ShTpAiEAvNOIQQ1DyydDuzS8JplGFAIm1XjnmHNvaS4xwIQ8AXw="}]}},"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":"michael@mikepb.com"}],"dist":{"shasum":"5d4f9d1e6618ecbe6bddc97760758c1ec26bbb7e","tarball":"https://registry.npmjs.org/react-draggable2/-/react-draggable2-0.7.0-alpha1.tgz","integrity":"sha512-4qrlQdCe2LmaCMaQnVgNVUJ4Y1a7YpBKBKlBuaF2A3vQ+2DnkeJNdM4HHWX6OZoE+TmRTWhG4rA0DPxvy/lGBA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAV5K1lkbhKng7zIRZ0FJIWylybFx3XBg0AmFqOgZ+PwIgA7Op44kKRKfcKYctkq/fOAV6lu+LCXEJov+uRLdDxzM="}]}}},"homepage":"https://github.com/mikepb/react-draggable","keywords":["react","draggable","react-component"],"repository":{"type":"git","url":"git+https://github.com/mikepb/react-draggable.git"},"contributors":[{"name":"Michael Phan-Ba","email":"michael@mikepb.com"}],"author":{"name":"Matt Zabriskie"},"bugs":{"url":"https://github.com/mikepb/react-draggable/issues"},"license":"MIT","readmeFilename":"README.md","users":{"markthethomas":true,"nickeljew":true}}