{"id":13424245,"url":"https://github.com/sagalbot/vue-sortable","last_synced_at":"2025-06-22T07:09:09.882Z","repository":{"id":58228567,"uuid":"55619351","full_name":"sagalbot/vue-sortable","owner":"sagalbot","description":"A lightweight directive for reorderable drag-and-drop lists using RubaXa/Sortable","archived":false,"fork":false,"pushed_at":"2020-08-21T15:45:06.000Z","size":423,"stargazers_count":720,"open_issues_count":25,"forks_count":104,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-06-21T23:46:37.856Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://sagalbot.github.io/vue-sortable/","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/sagalbot.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":"2016-04-06T15:47:45.000Z","updated_at":"2025-05-17T11:43:32.000Z","dependencies_parsed_at":"2022-08-31T09:20:39.779Z","dependency_job_id":null,"html_url":"https://github.com/sagalbot/vue-sortable","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/sagalbot/vue-sortable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagalbot%2Fvue-sortable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagalbot%2Fvue-sortable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagalbot%2Fvue-sortable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagalbot%2Fvue-sortable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sagalbot","download_url":"https://codeload.github.com/sagalbot/vue-sortable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagalbot%2Fvue-sortable/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261250336,"owners_count":23130544,"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.669Z","updated_at":"2025-06-22T07:09:04.865Z","avatar_url":"https://github.com/sagalbot.png","language":"JavaScript","readme":"# Vue Sortable [![Build Status](https://travis-ci.org/sagalbot/vue-sortable.svg?branch=master)](https://travis-ci.org/sagalbot/vue-sortable)\n\n\u003e Easily add drag-and-drop sorting to your Vue.js applications without jQuery, using the v-sortable directive, a thin wrapper for the minimalist [RubaXa/SortableJS](https://github.com/RubaXa/Sortable) library.\n\n##### [View Live Demo \u0026 Docs](http://sagalbot.github.io/vue-sortable/)\n\n\nInstallation\n--\n\n#### NPM\n\n```bash\nnpm install vue-sortable\n```\n\nSetup\n\n```javascript\nimport Vue from 'vue'\nimport Sortable from 'vue-sortable'\n\nVue.use(Sortable)\n```\n\n#### Browser Globals\n\nIf you aren't using a build system, you probably just want to include a `\u003cscript\u003e` tag and keep things simple. `unpkg.com` serves as a CDN for NPM projects. You can grab `vue-sortable` from unpkg in a couple ways:\n\n- `\u003cscript src=\"https://unpkg.com/vue-sortable@0.1.3\"\u003e\u003c/script\u003e     # use a specific version`\n- `\u003cscript src=\"https://unpkg.com/vue-sortable@latest\"\u003e\u003c/script\u003e    # use the latest version`\n\nNote that you will need to include `RubaXa/Sortable` \u0026 `Vue` before including `vue-sortable`.\n\n[View Live Example](http://jsbin.com/vasogus/edit?html,js,console,output)\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003c!-- VueJS --\u003e\n  \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js\"\u003e\u003c/script\u003e\n  \u003c!-- SortableJS --\u003e\n  \u003cscript src=\"https://unpkg.com/sortablejs@1.4.2\"\u003e\u003c/script\u003e\n  \u003c!-- VueSortable --\u003e\n  \u003cscript src=\"https://unpkg.com/vue-sortable@0.1.3\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cul v-sortable\u003e\n      \u003cli\u003eFoo\u003c/li\u003e\n      \u003cli\u003eBar\u003c/li\u003e\n      \u003cli\u003eBaz\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cscript\u003e\n        new Vue({\n          el: 'body'\n        });\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nCommon Use Cases\n--\n\n#### Update Source Data Order\n\nThe below implementation will update the order of the source data after an item is sorted using the `sortable` `onUpdate` callback.\n\n[View Live Example](http://jsbin.com/cicewo/edit?html,js,output)\n\n```\nnew Vue({\n  el: 'body',\n  data: {\n    list: ['Foo', 'Bar', 'Baz']\n  },\n  methods: {\n    onUpdate: function (event) {\n      this.list.splice(event.newIndex, 0, this.list.splice(event.oldIndex, 1)[0])\n    }\n  }\n});\n```\n\n```\n\u003cul v-sortable=\"{ onUpdate: onUpdate }\"\u003e\n    \u003cli v-for=\"item in list\"\u003e{{ item }}\u003c/li\u003e\n \u003c/ul\u003e\n```\n\nContributing\n--\n\nI'd like to keep this directive as simple as possible, but if there's something you'd like to see added feel free to submit a PR.\n\nThe plugin is built using the vue-cli [webpack-simple template](https://github.com/vuejs-templates/webpack-simple).\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for demo site\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagalbot%2Fvue-sortable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsagalbot%2Fvue-sortable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagalbot%2Fvue-sortable/lists"}