{"id":13829018,"url":"https://github.com/IsraelZablianov/draggable-vue-directive","last_synced_at":"2025-07-09T08:31:01.110Z","repository":{"id":57216075,"uuid":"121020579","full_name":"IsraelZablianov/draggable-vue-directive","owner":"IsraelZablianov","description":"Vue2 directive that handles drag \u0026 drop ","archived":false,"fork":false,"pushed_at":"2020-02-11T15:34:34.000Z","size":70,"stargazers_count":314,"open_issues_count":12,"forks_count":52,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-04-23T23:47:00.235Z","etag":null,"topics":["directive","drag-and-drop","draggable","draggable-vue-directive","drd","move","npm","typescript","vue-directive","vue2","vuejs","vuejs2","web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IsraelZablianov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-10T14:06:06.000Z","updated_at":"2024-03-10T09:09:37.000Z","dependencies_parsed_at":"2022-08-26T15:01:13.090Z","dependency_job_id":null,"html_url":"https://github.com/IsraelZablianov/draggable-vue-directive","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsraelZablianov%2Fdraggable-vue-directive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsraelZablianov%2Fdraggable-vue-directive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsraelZablianov%2Fdraggable-vue-directive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsraelZablianov%2Fdraggable-vue-directive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IsraelZablianov","download_url":"https://codeload.github.com/IsraelZablianov/draggable-vue-directive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225517606,"owners_count":17483515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["directive","drag-and-drop","draggable","draggable-vue-directive","drd","move","npm","typescript","vue-directive","vue2","vuejs","vuejs2","web"],"created_at":"2024-08-04T09:03:27.552Z","updated_at":"2024-11-20T09:30:28.988Z","avatar_url":"https://github.com/IsraelZablianov.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries","TypeScript","UI组件","UI Components [🔝](#readme)","UI Components"],"sub_categories":["UI Components","形成","Form"],"readme":"\u003ch1 align=\"center\"\u003edraggable-vue-directive\u003c/h1\u003e\n\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)\n[![npm download](https://img.shields.io/npm/dt/draggable-vue-directive.svg)](https://www.npmjs.com/package/draggable-vue-directive)\n[![npm download per month](https://img.shields.io/npm/dm/draggable-vue-directive.svg)](https://www.npmjs.com/package/draggable-vue-directive)\n[![npm version](https://img.shields.io/npm/v/draggable-vue-directive.svg)](https://www.npmjs.com/package/draggable-vue-directive)\n[![Package Quality](http://npm.packagequality.com/shield/draggable-vue-directive.svg)](http://packagequality.com/#?package=draggable-vue-directive)\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\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)\n\n\nVue directive (Vue.js 2.x) for handling element drag \u0026 drop.\n\n\n## Installation\n\n```console\nnpm install draggable-vue-directive --save\n```\n\n## Demo\n\n![demo gif](https://media.giphy.com/media/3o6nUO1lWMkeyH5nfW/giphy.gif)\n\nYou can view the live demo here: https://israelzablianov.github.io/draggable-demo\n\n\n## Examples\n\n### Without Handler\n\n``` html\n\u003cdiv v-draggable\u003e\n    classic draggable\n\u003c/div\u003e\n```\n\n`.vue` file:\n``` js\n  import { Draggable } from 'draggable-vue-directive'\n  ...\n  export default {\n        directives: {\n            Draggable,\n        },\n  ...\n```\n\n### With Handler\n\n``` html\n\u003cdiv v-draggable=\"draggableValue\"\u003e\n    \u003cdiv :ref=\"handleId\"\u003e\n        \u003cimg src=\"../assets/move.svg\" alt=\"move\"\u003e\n    \u003c/div\u003e\n    drag and drop using handler\n\u003c/div\u003e\n```\n\n`.vue` file:\n\n``` js\n  import { Draggable } from 'draggable-vue-directive'\n  ...\n  export default {\n        directives: {\n            Draggable,\n        },\n        data() {\n            return {\n                handleId: \"handle-id\",\n                draggableValue: {\n                    handle: undefined\n                }\n            };\n        },\n        mounted() {\n            this.draggableValue.handle = this.$refs[this.handleId];\n        }\n  ...\n```\n\n## `draggable` Value\n\nThe object passed to the directive is called the directive’s \u003cdfn\u003evalue\u003c/dfn\u003e.\u003cbr\u003e\nFor example, in `v-draggable=\"draggableValue\"`, `draggableValue` can be an object containing the folowing fields:\u003cbr\u003e\n\n* [`handle`](#handle)\n* [`onPositionChange`](#onpositionchange)\n* [`onDragEnd`](#ondragend)\n* [`onDragStart`](#ondragstart)\n* [`resetInitialPos`](#resetinitialpos)\n* [`initialPosition`](#initialposition)\n* [`stopDragging`](#stopdragging)\n* [`boundingRect`](#boundingrect)\n* [`boundingElement`](#boundingelement)\n* [`boundingRectMargin`](#boundingrectmargin)\n\n#### handle\nType: `HtmlElement | Vue`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\n\nThere are two ways to use the `draggable` directive, as shown in the demo above.\u003cbr\u003e\n\n1. **The simple use.** Just to put the directive on any Vue component or HTML element, and…boom! The element is draggable.\n2. **Using a handler.** If you choose to use a handler, the component itself will only be draggable using the handler.\n\n\n#### onPositionChange\nType: `Function`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\n\nSometimes you need to know the element’s coordinates while it’s being dragged.\u003cbr\u003e\nPassing a callback to `draggableValue` will achieve this goal; \nwhile dragging the element, the callback will be executed with 3 params: \n\n- `positionDiff`\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)\n- `event` (the event object)\n\n``` js\n  import { Draggable } from 'draggable-vue-directive'\n  ...\n  export default {\n        directives: {\n            Draggable,\n        },\n        data() {\n            return {\n                draggableValue: {\n                    onPositionChange: this.onPosChanged\n                }\n            };\n        },\n        methods: {\n            onPosChanged: function(positionDiff, absolutePosition, event) {\n                console.log(\"left corner\", absolutePosition.left);\n                console.log(\"top corner\", absolutePosition.top);\n            }\n        }\n  ...\n```\n\n#### onDragEnd\nType: `Function`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\n\nEmits only when dragging ends. Has the same functionality as [`onPositionChange`](#onpositionchange).\n\n#### onDragStart\nType: `Function`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\n\nEmits only when dragging starts. Has the same functionality as [`onPositionChange`](#onpositionchange).\n\n#### resetInitialPos\nType: `Boolean`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\ndefault: `undefined`\u003cbr\u003e\n\nReturns to the initial position of the element, before it is mounted.\n\n#### initialPosition\nType: `Position`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\ndefault: `undefined`\u003cbr\u003e\n\nSets the absolute starting position of this element.\u003cbr\u003e\nWill be applied when `resetInitialPos` is `true`.\n\n#### stopDragging\nType: `Boolean`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\ndefault: `undefined`\u003cbr\u003e\n\nImmediately stop dragging.\n\n\n#### boundingRect\nType: `ClientRect`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\ndefault: `undefined`\u003cbr\u003e\n\nConstrains dragging to within the bounds of the rectangle.\n\n\n#### boundingElement\nType: `HtmlElement`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\ndefault: `undefined`\u003cbr\u003e\n\nConstrains dragging to within the bounds of the element.\n\n\n#### boundingRectMargin\nType: `MarginOptions`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\ndefault: `undefined`\u003cbr\u003e\n\nWhen using `boundingRect` or `boundingElement`, you can pass an object with \n`top`, `left`, `bottom`, and `right` properties, to define a margin between the elements and the boundaries.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIsraelZablianov%2Fdraggable-vue-directive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIsraelZablianov%2Fdraggable-vue-directive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIsraelZablianov%2Fdraggable-vue-directive/lists"}