{"id":13424258,"url":"https://github.com/Astray-git/vue-dragula","last_synced_at":"2025-03-15T18:34:27.491Z","repository":{"id":53560535,"uuid":"57106699","full_name":"Astray-git/vue-dragula","owner":"Astray-git","description":":ok_hand: Drag and drop so simple it hurts http://astray-git.github.io/vue-dragula","archived":false,"fork":false,"pushed_at":"2021-03-24T10:56:30.000Z","size":421,"stargazers_count":359,"open_issues_count":21,"forks_count":69,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-02-28T03:24:41.302Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/Astray-git.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-26T07:19:15.000Z","updated_at":"2025-02-28T03:02:29.000Z","dependencies_parsed_at":"2022-09-18T22:32:18.478Z","dependency_job_id":null,"html_url":"https://github.com/Astray-git/vue-dragula","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Astray-git%2Fvue-dragula","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Astray-git%2Fvue-dragula/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Astray-git%2Fvue-dragula/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Astray-git%2Fvue-dragula/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Astray-git","download_url":"https://codeload.github.com/Astray-git/vue-dragula/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243775798,"owners_count":20346265,"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":[],"created_at":"2024-07-31T00:00:50.877Z","updated_at":"2025-03-15T18:34:22.470Z","avatar_url":"https://github.com/Astray-git.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","JavaScript","UI组件","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins","形成","UI Components","Form"],"readme":"# vue-dragula\n\u003e :ok_hand: Drag and drop so simple it hurts\n\nVue wrapper for [`dragula`][1].\n\n## Install\n#### CommonJS\n\n- Available through npm as `vue-dragula`.\n  ``` bash\n  npm install vue-dragula\n  ```\n\n  ``` js\n  var Vue = require('vue');\n  var VueDragula = require('vue-dragula');\n\n  Vue.use(VueDragula);\n  ```\n\n#### Direct include\n\n- You can also directly include it with a `\u003cscript\u003e` tag when you have Vue and dragula already included globally. It will automatically install itself.\n\n## Usage\n\ntemplate:\n``` html\n\u003cdiv class=\"wrapper\"\u003e\n  \u003cdiv class=\"container\" v-dragula=\"colOne\" bag=\"first-bag\"\u003e\n    \u003c!-- with click --\u003e\n    \u003cdiv v-for=\"text in colOne\" @click=\"onClick\"\u003e{{text}} [click me]\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"container\" v-dragula=\"colTwo\" bag=\"first-bag\"\u003e\n    \u003cdiv v-for=\"text in colTwo\"\u003e{{text}}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**NOTE** Vuejs 2.x \n\nTo make sure a correct update for DOM element order, we must provide a `key` for `v-for` directive inside a dragula container. https://vuejs.org/v2/guide/list.html#key  \nWith `v-for=\"item in list\"`, we need `:key=\"item.id\"` for object items, `:key=\"item\"` for plain string.\n\n\n\n## APIs\n\nYou can access them from `Vue.vueDragula`\n\n### `options(name, options)`\n\nSet dragula options, refer to: https://github.com/bevacqua/dragula#optionscontainers\n```js\n...\nnew Vue({\n  ...\n  created: function () {\n    Vue.vueDragula.options('my-bag', {\n      direction: 'vertical'\n    })\n  }\n})\n```\n\n### `find(name)`\n\nReturns the `bag` for a `drake` instance. Contains the following properties:\n\n- `name` the name that identifies the bag\n- `drake` the raw `drake` instance\n\n## Events\nFor drake events, refer to: https://github.com/bevacqua/dragula#drakeon-events\n\n\n```js\n...\nnew Vue({\n  ready: function () {\n    Vue.vueDragula.eventBus.$on('drop', function (args) {\n      console.log('drop: ' + args[0])\n    })\n  }\n})\n```\n\n\n## Special Events for vue-dragula\n\n| Event Name |      Listener Arguments      |  Event Description |\n| :-------------: |:-------------:| -----|\n| dropModel | bagName, el, target, source, dropIndex | model was synced, dropIndex exposed |\n| removeModel | bagName, el, container, removeIndex | model was synced, removeIndex exposed |\n\n[1]: https://github.com/bevacqua/dragula\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAstray-git%2Fvue-dragula","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAstray-git%2Fvue-dragula","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAstray-git%2Fvue-dragula/lists"}