{"_id":"@cmcleese/draggable-vue-directive","_rev":"1-b93025c9f0bbb3a47dd311174d37e278","name":"@cmcleese/draggable-vue-directive","dist-tags":{"latest":"2.1.2"},"versions":{"2.1.2":{"name":"@cmcleese/draggable-vue-directive","version":"2.1.2","description":"A simple directive to handle drag and drop of any Vue component","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc --sourceMap"},"repository":{"type":"git","url":"git+https://github.com/cmcleese/draggable-vue-directive.git"},"keywords":["drag-and-drop","moveable","typescript","library","drd","draggable","drag","draggable-vue-directive","vue"],"author":{"name":"Israel Zablianov","email":"123hartk123@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com//cmcleese/draggable-vue-directive/issues"},"homepage":"https://github.com//cmcleese/draggable-vue-directive#readme","dependencies":{},"devDependencies":{"vue":"^2.5.13"},"gitHead":"7e15e7c58c5f19b1a558380e33b9583ecea247dd","_id":"@cmcleese/draggable-vue-directive@2.1.2","_nodeVersion":"12.8.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-euirFHEhlScibspz3J4JxTsFNBDKhYj5ZyMb2uSS+YSdAL3E8EwmJhZff40FNQwwhKvipT6uShFM/32fV/qlxA==","shasum":"28f897b45b71a96d47d3a42734222cb253c2bb0b","tarball":"https://registry.npmjs.org/@cmcleese/draggable-vue-directive/-/draggable-vue-directive-2.1.2.tgz","fileCount":10,"unpackedSize":26880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR63aCRA9TVsSAnZWagAApTAP/R0/yZX2+petpO31eX+w\nTjDswAiP2HNnJjom9JKt1YMQMZ+VGRhWF5wuJmziiGSzc5B1iMU+N1WAxCcV\nJIQ688DZnmaTVXOdNJ3ep62JN7p0JVoQ0pCwSnuRoGDorOMiYYFuw1xBIH6g\nZYyy+B0bbUPDj/B6IGJNOeK9Wd8G8PUpvvAZf9b1AujZMrtSOKOfPu3kPo2g\nArPjZeXUC80rZPtLUHQX9w+StV6zYZroA048StM3Dwh+3V32sjjUIgHJg8FS\n2o6FwMrZ/wVDsxetCBLuQ7GnnozZLbq9bVV2hojkz4fZYH94ZgVHBXO42Ltn\nTdT98J+SpbH3HHUVssJq40I6zKAcTrCEigLhyHhLfH+0FwBbTaUbnB9KdyUP\nqrMc1WoiPWQzxX9lSxfzxwL7T0MtQRJXLKYYd5lkK7SGBAqu4d92TBBD/ZR1\njIbbeIcAH0cEIYrCJdSVvatyFHNtH7nKZsW7o7LCvcQrtvRIlnGs6DrYKgbs\nXwVE/l4s1ahHHQYCKxzUT71KbfA+6UAp/BYyLTRgq9usNpq/QjowIWz4PT5k\nLYZwFNBiRjuQ4iAs+vlslvImhix6pWRRZAVZ1FfFUH7vljAZ1Y8oZOcJ8k85\nMWA634Dbd5Bn1A37rwb1tajHc5bYcqHfup39YNXeM5WUIkBQHWmSVUtjTU9J\nOguz\r\n=WfBd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzcpiI6Bh59rcMteiOE4AD/xqoUBxFA4ySUPlFCwIZ+wIgKd+DzcbXBAzwv+0md0RnHvH8km6WYlYWggm3iNmrXOw="}]},"maintainers":[{"name":"cmcleese","email":"chris.mcleese86@gmail.com"}],"_npmUser":{"name":"cmcleese","email":"chris.mcleese86@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/draggable-vue-directive_2.1.2_1598533081645_0.04401639810597624"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-27T12:58:01.604Z","2.1.2":"2020-08-27T12:58:01.819Z","modified":"2022-04-04T23:43:03.129Z"},"maintainers":[{"name":"cmcleese","email":"chris.mcleese86@gmail.com"}],"description":"A simple directive to handle drag and drop of any Vue component","homepage":"https://github.com//cmcleese/draggable-vue-directive#readme","keywords":["drag-and-drop","moveable","typescript","library","drd","draggable","drag","draggable-vue-directive","vue"],"repository":{"type":"git","url":"git+https://github.com/cmcleese/draggable-vue-directive.git"},"author":{"name":"Israel Zablianov","email":"123hartk123@gmail.com"},"bugs":{"url":"https://github.com//cmcleese/draggable-vue-directive/issues"},"license":"MIT","readme":"<h1 align=\"center\">draggable-vue-directive</h1>\r\n\r\n[![GitHub open issues](https://img.shields.io/github/issues/IsraelZablianov/draggable-vue-directive.svg)](https://github.com/IsraelZablianov/draggable-vue-directive/issues?q=is%3Aopen+is%3Aissue)\r\n[![npm download](https://img.shields.io/npm/dt/draggable-vue-directive.svg)](https://www.npmjs.com/package/draggable-vue-directive)\r\n[![npm download per month](https://img.shields.io/npm/dm/draggable-vue-directive.svg)](https://www.npmjs.com/package/draggable-vue-directive)\r\n[![npm version](https://img.shields.io/npm/v/draggable-vue-directive.svg)](https://www.npmjs.com/package/draggable-vue-directive)\r\n[![Package Quality](http://npm.packagequality.com/shield/draggable-vue-directive.svg)](http://packagequality.com/#?package=draggable-vue-directive)\r\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\r\n[![MIT License](https://img.shields.io/github/license/IsraelZablianov/draggable-vue-directive.svg)](https://github.com/IsraelZablianov/draggable-vue-directive/blob/master/LICENSE.md)\r\n\r\n\r\nVue directive (Vue.js 2.x) for handling element drag & drop.\r\n\r\n## NOTES\r\n\r\nIncludes firefox fix : [Fix ReferenceError: \"TouchEvent is not defined\" in Firefox ](https://github.com/IsraelZablianov/draggable-vue-directive/pull/43)\r\n\r\n\r\n## Installation\r\n\r\n```console\r\nnpm install draggable-vue-directive --save\r\n```\r\n\r\n## Demo\r\n\r\n![demo gif](https://media.giphy.com/media/3o6nUO1lWMkeyH5nfW/giphy.gif)\r\n\r\nYou can view the live demo here: https://israelzablianov.github.io/draggable-demo\r\n\r\n\r\n## Examples\r\n\r\n### Without Handler\r\n\r\n``` html\r\n<div v-draggable>\r\n    classic draggable\r\n</div>\r\n```\r\n\r\n`.vue` file:\r\n``` js\r\n  import { Draggable } from 'draggable-vue-directive'\r\n  ...\r\n  export default {\r\n        directives: {\r\n            Draggable,\r\n        },\r\n  ...\r\n```\r\n\r\n### With Handler\r\n\r\n``` html\r\n<div v-draggable=\"draggableValue\">\r\n    <div :ref=\"handleId\">\r\n        <img src=\"../assets/move.svg\" alt=\"move\">\r\n    </div>\r\n    drag and drop using handler\r\n</div>\r\n```\r\n\r\n`.vue` file:\r\n\r\n``` js\r\n  import { Draggable } from 'draggable-vue-directive'\r\n  ...\r\n  export default {\r\n        directives: {\r\n            Draggable,\r\n        },\r\n        data() {\r\n            return {\r\n                handleId: \"handle-id\",\r\n                draggableValue: {\r\n                    handle: undefined\r\n                }\r\n            };\r\n        },\r\n        mounted() {\r\n            this.draggableValue.handle = this.$refs[this.handleId];\r\n        }\r\n  ...\r\n```\r\n\r\n## `draggable` Value\r\n\r\nThe object passed to the directive is called the directive’s <dfn>value</dfn>.<br>\r\nFor example, in `v-draggable=\"draggableValue\"`, `draggableValue` can be an object containing the folowing fields:<br>\r\n\r\n* [`handle`](#handle)\r\n* [`onPositionChange`](#onpositionchange)\r\n* [`onDragEnd`](#ondragend)\r\n* [`onDragStart`](#ondragstart)\r\n* [`resetInitialPos`](#resetinitialpos)\r\n* [`initialPosition`](#initialposition)\r\n* [`stopDragging`](#stopdragging)\r\n* [`boundingRect`](#boundingrect)\r\n* [`boundingElement`](#boundingelement)\r\n* [`boundingRectMargin`](#boundingrectmargin)\r\n\r\n#### handle\r\nType: `HtmlElement | Vue`<br>\r\nRequired: `false`<br>\r\n\r\nThere are two ways to use the `draggable` directive, as shown in the demo above.<br>\r\n\r\n1. **The simple use.** Just to put the directive on any Vue component or HTML element, and…boom! The element is draggable.\r\n2. **Using a handler.** If you choose to use a handler, the component itself will only be draggable using the handler.\r\n\r\n\r\n#### onPositionChange\r\nType: `Function`<br>\r\nRequired: `false`<br>\r\n\r\nSometimes you need to know the element’s coordinates while it’s being dragged.<br>\r\nPassing a callback to `draggableValue` will achieve this goal; \r\nwhile dragging the element, the callback will be executed with 3 params: \r\n\r\n- `positionDiff`\r\n- `absolutePosition` (the current position; the first time the directive is added to the DOM or being initialized, the value will be `undefined`, unless the element has `left` and `top` values)\r\n- `event` (the event object)\r\n\r\n``` js\r\n  import { Draggable } from 'draggable-vue-directive'\r\n  ...\r\n  export default {\r\n        directives: {\r\n            Draggable,\r\n        },\r\n        data() {\r\n            return {\r\n                draggableValue: {\r\n                    onPositionChange: this.onPosChanged\r\n                }\r\n            };\r\n        },\r\n        methods: {\r\n            onPosChanged: function(positionDiff, absolutePosition, event) {\r\n                console.log(\"left corner\", absolutePosition.left);\r\n                console.log(\"top corner\", absolutePosition.top);\r\n            }\r\n        }\r\n  ...\r\n```\r\n\r\n#### onDragEnd\r\nType: `Function`<br>\r\nRequired: `false`<br>\r\n\r\nEmits only when dragging ends. Has the same functionality as [`onPositionChange`](#onpositionchange).\r\n\r\n#### onDragStart\r\nType: `Function`<br>\r\nRequired: `false`<br>\r\n\r\nEmits only when dragging starts. Has the same functionality as [`onPositionChange`](#onpositionchange).\r\n\r\n#### resetInitialPos\r\nType: `Boolean`<br>\r\nRequired: `false`<br>\r\ndefault: `undefined`<br>\r\n\r\nReturns to the initial position of the element, before it is mounted.\r\n\r\n#### initialPosition\r\nType: `Position`<br>\r\nRequired: `false`<br>\r\ndefault: `undefined`<br>\r\n\r\nSets the absolute starting position of this element.<br>\r\nWill be applied when `resetInitialPos` is `true`.\r\n\r\n#### stopDragging\r\nType: `Boolean`<br>\r\nRequired: `false`<br>\r\ndefault: `undefined`<br>\r\n\r\nImmediately stop dragging.\r\n\r\n\r\n#### boundingRect\r\nType: `ClientRect`<br>\r\nRequired: `false`<br>\r\ndefault: `undefined`<br>\r\n\r\nConstrains dragging to within the bounds of the rectangle.\r\n\r\n\r\n#### boundingElement\r\nType: `HtmlElement`<br>\r\nRequired: `false`<br>\r\ndefault: `undefined`<br>\r\n\r\nConstrains dragging to within the bounds of the element.\r\n\r\n\r\n#### boundingRectMargin\r\nType: `MarginOptions`<br>\r\nRequired: `false`<br>\r\ndefault: `undefined`<br>\r\n\r\nWhen using `boundingRect` or `boundingElement`, you can pass an object with \r\n`top`, `left`, `bottom`, and `right` properties, to define a margin between the elements and the boundaries.\r\n","readmeFilename":"README.md"}