{"_id":"@4keys/svg.draggable.js","_rev":"3-b42249ab4035e5c0ff713d69c5545394","name":"@4keys/svg.draggable.js","dist-tags":{"latest":"2.2.2"},"versions":{"2.2.1":{"name":"@4keys/svg.draggable.js","version":"2.2.1","description":"An extension for svg.js which allows to drag elements with your mouse","main":"dist/svg.draggable.js","keywords":["svg.js","draggable","mouse"],"bugs":{"url":"https://github.com/wout/svg.draggable.js/issues"},"license":"MIT","author":{"name":"Wout Fierens"},"contributors":[{"name":"Wout Fierens"},{"name":"Ulrich-Matthias Schäfer"}],"homepage":"https://github.com/wout/svg.draggable.js","files":["dist/"],"repository":{"type":"git","url":"git+https://github.com/wout/svg.draggable.js.git"},"engines":{"node":">= 0.8.0"},"devDependencies":{"grunt-contrib-concat":"~0.3.0","grunt-contrib-uglify":"~0.2.0","grunt-contrib-watch":"~0.4.0","grunt-contrib-clean":"~0.4.0","grunt-contrib-copy":"^0.7.0","grunt":"~0.4.5","grunt-bumper":"^1.0.4"},"dependencies":{"svg.js":"^2.0.1"},"gitHead":"4fef6f409758ca73688839790d4e3679866d3704","_id":"@4keys/svg.draggable.js@2.2.1","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"saintplay","email":"saintplay96@gmail.com"},"dist":{"integrity":"sha512-jjRaJfpkFgOhJ2SYi2w+3kiChBdlq/CTDX1xtdPQNXw1OjEpUiikymUKGDDLo33N9kcgXICr7+bDNY7JX+jO7w==","shasum":"1cf64c723f15b833ea9b551e1994429ff183e6b8","tarball":"https://registry.npmjs.org/@4keys/svg.draggable.js/-/svg.draggable.js-2.2.1.tgz","fileCount":5,"unpackedSize":15522,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPK42duYhYmUPry6BSAleJFWtNk+FLEcXnJOIvZMv/MAIgVBl8C6zl/chi71lcpu6EINewjor28FSrZtGGOO5+JBY="}]},"maintainers":[{"name":"saintplay","email":"saintplay96@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg.draggable.js_2.2.1_1523377027839_0.5941806068662951"},"_hasShrinkwrap":false},"2.2.2":{"name":"@4keys/svg.draggable.js","version":"2.2.2","description":"An extension for svg.js which allows to drag elements with your mouse","main":"dist/svg.draggable.js","keywords":["svg.js","draggable","mouse"],"bugs":{"url":"https://github.com/wout/svg.draggable.js/issues"},"license":"MIT","author":{"name":"Wout Fierens"},"contributors":[{"name":"Wout Fierens"},{"name":"Ulrich-Matthias Schäfer"}],"homepage":"https://github.com/wout/svg.draggable.js","repository":{"type":"git","url":"git+https://github.com/wout/svg.draggable.js.git"},"engines":{"node":">= 0.8.0"},"devDependencies":{"grunt-contrib-concat":"~0.3.0","grunt-contrib-uglify":"~0.2.0","grunt-contrib-watch":"~0.4.0","grunt-contrib-clean":"~0.4.0","grunt-contrib-copy":"^0.7.0","grunt":"~0.4.5","grunt-bumper":"^1.0.4"},"dependencies":{"svg.js":"^2.0.1"},"gitHead":"f817a3113ca531e46de10e04653a6f67296020ff","_id":"@4keys/svg.draggable.js@2.2.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"saintplay","email":"saintplay96@gmail.com"},"dist":{"integrity":"sha512-KpaIgn6UwqmJ0tpMb7JMYoVdZ9s9DrFE814izCHObGMKwOAj+TpAskaQ5g+uwTi7QaaKa2MnFeJjfFfUY+ATng==","shasum":"c3461c3c7b54d4dd33d5bc6b1651d2f0c366e17a","tarball":"https://registry.npmjs.org/@4keys/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz","fileCount":5,"unpackedSize":15636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJblF5gCRA9TVsSAnZWagAA+8sP/RnQiqhzckpHendqNZ1K\nXt+2vVregH/6E47+qWGoIGPirq02b0LiyLXyRLrVylHp2n421xxBBkkqgb6I\n8y1uQtS3DfOACGOBiTPZJTOsvWzmHo1vrIuD6vNTTR+qtxUymB2ejW4Zedh2\ndifqWeQ31uDAEzhjc/RuI+aWCqO/a3eMVI7yKVMrsera/ezUXFn0Y+tbRBcu\natJg4NpPQ9nH5foDJOyUbHPpIhzeFC1Tf/AokmJRaJ6m08smI3XXuYEYbS7W\ncnidkEocdN/LeRFSMY7+y9ZkzJ82GQhw1cnzVSmqQnpKmXUhEUev9iQlTudh\nEr9r3cDc80YSBtmmwMV/b89P0k+Mp7NrhDx6l46J8XYEntMtjvpbSxRH6eVt\nq1uCJbmTyboHGaw//TKKi9jezHviEEimr1ztdFELr5zj2s1J3NOUc4aCsXNa\noq0ArI+IishBqruWJno4caV69C7VlcAKUoZmUxnvxtC75zAHZgp64BwCivPS\ndpTL+X1A8JQUt5TSdfLF0174h4LqHAfYTDgwbn33qdC84a9XOPm4rYqn++YG\nTL5D2un3T6cAmr8vIehyvQPUMY+W7sKkpXryUNxyWAZWkNqJEPNeL8wT/2wN\n0dre7L/yBouzXHnJnwgGr5Wq13wLLwihxF9xsUDInno6SUfH6thB0R+lTIFV\nleub\r\n=ZK4v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbsnPREfIQmWrKeO+vsDwz42kaARNMFL6Os5akbMhpXwIgCEV5Kf9CXv3GpzvgTxP2TdWZmGMX00OU3AkMKPv5XmY="}]},"maintainers":[{"name":"saintplay","email":"saintplay96@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg.draggable.js_2.2.2_1536450143502_0.27664751358960094"},"_hasShrinkwrap":false}},"time":{"created":"2018-04-10T16:17:07.758Z","2.2.1":"2018-04-10T16:17:07.883Z","modified":"2022-04-04T10:47:06.162Z","2.2.2":"2018-09-08T23:42:23.632Z"},"maintainers":[{"name":"saintplay","email":"saintplay96@gmail.com"}],"description":"An extension for svg.js which allows to drag elements with your mouse","homepage":"https://github.com/wout/svg.draggable.js","keywords":["svg.js","draggable","mouse"],"repository":{"type":"git","url":"git+https://github.com/wout/svg.draggable.js.git"},"contributors":[{"name":"Wout Fierens"},{"name":"Ulrich-Matthias Schäfer"}],"author":{"name":"Wout Fierens"},"bugs":{"url":"https://github.com/wout/svg.draggable.js/issues"},"license":"MIT","readme":"# svg.draggable.js\r\n\r\nA plugin for the [svgdotjs.github.io](https://svgdotjs.github.io/) library to make elements draggable.\r\n\r\nSvg.draggable.js is licensed under the terms of the MIT License.\r\n\r\n## Usage\r\n\r\nInstall the plugin:\r\n\r\n    bower install svg.draggable.js\r\n\r\nInclude this plugin after including the svg.js library in your html document.\r\n\r\n```html\r\n<script src=\"svg.js\"></script>\r\n<script src=\"svg.draggable.js\"></script>\r\n```\r\n\r\nTo make an element draggable just call `draggable()` in the element\r\n\r\n```javascript\r\nvar draw = SVG('canvas').size(400, 400)\r\nvar rect = draw.rect(100, 100)\r\n\r\nrect.draggable()\r\n```\r\n\r\nYes indeed, that's it! Now the `rect` is draggable.\r\n\r\n## Events\r\nThe Plugin fires 4 different events\r\n\r\n- beforedrag (cancelable)\r\n- dragstart\r\n- dragmove (cancelable)\r\n- dragend\r\n\r\nYou can bind/unbind listeners to this events:\r\n\r\n```javascript\r\n// bind\r\nrect.on('dragstart.namespace', function(event){\r\n\r\n\t// event.detail.event hold the given data explained below\r\n\r\n})\r\n\r\n// unbind\r\nrect.off('dragstart.namespace')\r\n```\r\n\r\n### event.detail\r\n\r\n`beforedrag`, `dragstart`, `dragmove` and `dragend` gives you the `event` and the `handler` which calculates the drag.\r\nExcept for `beforedrag` the events also give you:\r\n\r\n - `detail.m` transformation matrix to calculate screen coords to coords in the elements userspace\r\n - `detail.p` pageX and pageY transformed into the elements userspace\r\n\r\n### cancelable events\r\n\r\nYou can prevent the default action of `beforedrag` and `dragmove` with a call to `event.preventDefault()` in the callback function.\r\nThe shape won't be dragged in this case. That is helpfull if you want to implement your own drag handling.\r\n\r\n```javascript\r\nrect.draggable().on('beforedrag', function(e){\r\n  e.preventDefault()\r\n  // no other events are bound\r\n  // drag was completely prevented\r\n})\r\n\r\nrect.draggable().on('dragmove', function(e){\r\n  e.preventDefault()\r\n  this.move(e.detail.p.x, e.detail.p.y)\r\n  // events are still bound e.g. dragend will fire anyway\r\n})\r\n```\r\n \r\n## Constraint\r\nThe drag functionality can be limited within a given box. You can pass the the constraint values as an object:\r\n\r\n```javascript\r\nrect.draggable({\r\n  minX: 10\r\n, minY: 15\r\n, maxX: 200\r\n, maxY: 100\r\n, snapToGrid: 20 \r\n})\r\n```\r\n\r\nFor more dynamic constraints a function can be passed as well:\r\n\r\n```javascript\r\nrect.draggable(function(x, y) {\r\n  return { x: x < 1000, y: y < 300 }\r\n})\r\n```\r\n\r\n**Note** that every constraint given is evaluated in the elements coordinate system and not in the screen-space\r\n\r\n## Remove\r\nThe draggable functionality can be removed calling draggable again with false as argument:\r\n\r\n```javascript\r\nrect.draggable(false)\r\n```\r\n\r\n\r\n## Restrictions\r\n\r\n- If your root-svg is transformed this plugin won't work properly (Viewbox is possible)\r\n- Furthermore it is not possible to move a rotated or flipped group properly. However transformed nested SVGs are possible and should be used instead.\r\n\r\n\r\n## Dependencies\r\nThis module requires svg.js >= v2.0.1\r\n","readmeFilename":"README.md"}