{"id":13783649,"url":"https://github.com/Vivify-Ideas/vue-draggable","last_synced_at":"2025-05-11T19:31:16.425Z","repository":{"id":16976808,"uuid":"80952125","full_name":"Vivify-Ideas/vue-draggable","owner":"Vivify-Ideas","description":"Vue Drag and Drop library without any dependency 👌","archived":false,"fork":false,"pushed_at":"2022-12-10T17:06:57.000Z","size":2272,"stargazers_count":308,"open_issues_count":41,"forks_count":38,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-12T21:34:40.959Z","etag":null,"topics":["drag-and-drop","javascript","vue"],"latest_commit_sha":null,"homepage":"https://vivify-ideas.github.io/vue-draggable/","language":"JavaScript","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/Vivify-Ideas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-04T22:13:42.000Z","updated_at":"2025-03-15T14:43:25.000Z","dependencies_parsed_at":"2023-01-14T07:00:34.632Z","dependency_job_id":null,"html_url":"https://github.com/Vivify-Ideas/vue-draggable","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vivify-Ideas%2Fvue-draggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vivify-Ideas%2Fvue-draggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vivify-Ideas%2Fvue-draggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vivify-Ideas%2Fvue-draggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Vivify-Ideas","download_url":"https://codeload.github.com/Vivify-Ideas/vue-draggable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253621032,"owners_count":21937466,"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":["drag-and-drop","javascript","vue"],"created_at":"2024-08-03T19:00:27.460Z","updated_at":"2025-05-11T19:31:15.757Z","avatar_url":"https://github.com/Vivify-Ideas.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components","精选 LessCode 项目"],"sub_categories":["UI Components","Form"],"readme":"# \u003cp align=\"center\"\u003e\u003cimg src=\"./vue-draggable.png\" width=\"340\" height=\"140\"\u003e\u003c/p\u003e\n\n[![npm version](https://img.shields.io/npm/v/vue-draggable.svg?maxAge=2592000\u0026v=2.0.6)](https://www.npmjs.com/package/vue-draggable)\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\n[![GitHub open issues](https://img.shields.io/github/issues/Vivify-Ideas/vue-draggable.svg?maxAge=2592000\u0026v=2.0.6)](https://github.com/Vivify-Ideas/vue-draggable/issues?q=is%3Aopen+is%3Aissue)\n[![npm download](https://img.shields.io/npm/dt/vue-draggable.svg?maxAge=2592000\u0026v=2.0.6)](https://www.npmjs.com/package/vue-draggable)\n[![MIT License](https://img.shields.io/github/license/Vivify-Ideas/vue-draggable.svg)](https://github.com/Vivify-Ideas/vue-draggable/blob/master/LICENSE)\n\n## Description\n\nVue Drag and Drop library without any dependency.\n\nNative HTML5 drag and drop implementation made for Vue.\n\n[Examples 🎪](https://vivify-ideas.github.io/vue-draggable/example/)\n\n## Installation\n\n```\nnpm install vue-draggable\n\u003c!-- or --\u003e\nyarn add vue-draggable\n```\n\n## Setup\n\n### Setup plugin\n\n```javascript\nimport Vue from 'vue'\nimport VueDraggable from 'vue-draggable'\n\nVue.use(VueDraggable)\n```\n\n### Setup directive locally\n\n```javascript\nimport { VueDraggableDirective } from 'vue-draggable'\n\nexport default {\n  directives: {\n    dragAndDrop: VueDraggableDirective\n  }\n}\n\n```\n\n## Usage\n\nIn the template, use the `v-drag-and-drop` directive:\n\n### HTML\n\n```html\n\u003cdiv v-drag-and-drop:options=\"options\"\u003e\n  \u003cul\u003e\n    \u003cli\u003eItem 1\u003c/li\u003e\n    \u003cli\u003eItem 2\u003c/li\u003e\n    \u003cli\u003eItem 3\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cul\u003e\n      \u003cli\u003eItem 4\u003c/li\u003e\n      \u003cli\u003eItem 5\u003c/li\u003e\n      \u003cli\u003eItem 6\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### Options\n\n#### Directive `v-drag-and-drop` available options\n\n```javascript\n{\n  dropzoneSelector: 'ul',\n  draggableSelector: 'li',\n  handlerSelector: null,\n  reactivityEnabled: true,\n  multipleDropzonesItemsDraggingEnabled: true,\n  showDropzoneAreas: true,\n  onDrop: function(event) {},\n  onDragstart: function(event) {},\n  onDragenter: function(event) {},\n  onDragover: function(event) {},\n  onDragend: function(event) {}\n}\n```\n\n#### Dropzone events (added, removed, reordered)\n\n```html\n\u003cdiv v-drag-and-drop:options=\"options\"\u003e\n  \u003cul\n    @added=\"added\"\n    @removed=\"removed\"\n    @reordered=\"reordered\"\n  \u003e\n    \u003cli data-id=\"1\"\u003eItem 1\u003c/li\u003e\n    \u003cli data-id=\"2\"\u003eItem 2\u003c/li\u003e\n    \u003cli data-id=\"3\"\u003eItem 3\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\nThese three custom events have additional `ids` and `index` params.\nIds is an array of defined `data-id` attributes and `index` represents\ndrop intersection. For more info check out [example](https://vivify-ideas.github.io/vue-draggable/example/#working-with-reactive-data)\n\n#### Reactivity handling and renderless component\n\nThere is available `VueDraggableGroup` component so you don't need to write your own model\nmanipulation logic. However, usage of this component is optional. Use only with Vue v2.6+.\nYou can pass to component optional `itemsKey` prop if you want to change items collection\nproperty name. By default it's `items`.\n\n```html\n\u003cdiv v-drag-and-drop:options=\"options\"\u003e\n  \u003c!-- optional renderless component --\u003e\n  \u003cvue-draggable-group\n    v-for=\"group in groups\"\n    v-model=\"group.items\"\n    :groups=\"groups\"\n    :key=\"group.id\"\n    :data-id=\"group.id\"\n    @change=\"onGroupsChange\"\n  \u003e\n    \u003cul\u003e\n      \u003cli\n        v-for=\"item in group.items\"\n        :key=\"item.id\"\n        :data-id=\"item.id\"\n      \u003e\n        \u003clabel v-text=\"item.name\"\u003e\u003c/label\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/vue-draggable-group\u003e\n\u003c/div\u003e\n```\n\n#### Event Params for `onDrop`, `onDragstart`, `onDragenter`, `onDragover`, `onDragend` callbacks\n\n```javascript\n{\n  nativeEvent: {}, // native js event\n  items: [], // list of selected draggable elements\n  owner: null, // old dropzone element\n  droptarget: null // new dropzone element,\n  stop: () =\u003e {} // Stop D\u0026D (available only for callbacks `onDragstart` and `onDragend`)\n}\n```\n\n## TypeScript\n\nIncluded TypeScript definitions.\n\n## Browser Compatibility\nPolyfills for IE9+ support are included in the repo.\n\nIf you need to support IE9 in your applications, import the polyfills:\n\n```javascript\nimport 'vue-draggable/polyfills'\n```\n\n## Contributors 🎖\n\n[\u003cimg alt=\"nikolasp\" src=\"https://avatars2.githubusercontent.com/u/9221865?v=4\u0026s=100\u0026width=100\"\u003e](https://github.com/nikolasp) |[\u003cimg alt=\"tiagocsilva\" src=\"https://avatars3.githubusercontent.com/u/18669835?v=4\u0026s=100\u0026width=100\"\u003e](https://github.com/tiagocsilva) |[\u003cimg alt=\"piboistudios\" src=\"https://avatars3.githubusercontent.com/u/21025122?v=4\u0026s=100\u0026width=100\"\u003e](https://github.com/piboistudios) |[\u003cimg alt=\"swaroopjo\" src=\"https://avatars1.githubusercontent.com/u/2223563?v=4\u0026s=100\u0026width=100\" width=\"100\"\u003e](https://github.com/swaroopjo) |[\u003cimg alt=\"figurluk\" src=\"https://avatars1.githubusercontent.com/u/5638071?v=4\u0026s=100\u0026width=100\" width=\"100\"\u003e](https://github.com/figurluk) |\n:---:|:---:|:---:|:---:|:---:|\n[nikolasp](https://github.com/nikolasp)|[tiagocsilva](https://github.com/tiagocsilva)|[piboistudios](https://github.com/piboistudios)|[swaroopjo](https://github.com/swaroopjo)|[figurluk](https://github.com/figurluk)|\n\n---\n\nLICENCE MIT - Created by Nikola Spalevic (nikolaspalevic@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVivify-Ideas%2Fvue-draggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FVivify-Ideas%2Fvue-draggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVivify-Ideas%2Fvue-draggable/lists"}