{"id":14973671,"url":"https://github.com/alfred-skyblue/vue-draggable-plus","last_synced_at":"2025-05-16T01:00:28.780Z","repository":{"id":148147825,"uuid":"611319064","full_name":"Alfred-Skyblue/vue-draggable-plus","owner":"Alfred-Skyblue","description":"Universal Drag-and-Drop Component Supporting both Vue 3 and Vue 2","archived":false,"fork":false,"pushed_at":"2025-05-06T07:57:31.000Z","size":12085,"stargazers_count":3567,"open_issues_count":91,"forks_count":149,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-05-09T00:55:12.874Z","etag":null,"topics":["composition-api","drag","drag-and-drop","draggable","sortablejs","typescript","vue","vue2","vue3"],"latest_commit_sha":null,"homepage":"https://vue-draggable-plus.pages.dev/en/","language":"Vue","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/Alfred-Skyblue.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-03-08T15:24:40.000Z","updated_at":"2025-05-08T03:09:08.000Z","dependencies_parsed_at":"2023-12-20T14:45:24.712Z","dependency_job_id":"63c72ad4-5e45-4bbb-b196-555447bfbdea","html_url":"https://github.com/Alfred-Skyblue/vue-draggable-plus","commit_stats":{"total_commits":218,"total_committers":21,"mean_commits":"10.380952380952381","dds":"0.16055045871559637","last_synced_commit":"da43c3d52b8c36dcfee707eee045cfb18e1cb7a1"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alfred-Skyblue%2Fvue-draggable-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alfred-Skyblue%2Fvue-draggable-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alfred-Skyblue%2Fvue-draggable-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alfred-Skyblue%2Fvue-draggable-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alfred-Skyblue","download_url":"https://codeload.github.com/Alfred-Skyblue/vue-draggable-plus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254448578,"owners_count":22072764,"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":["composition-api","drag","drag-and-drop","draggable","sortablejs","typescript","vue","vue2","vue3"],"created_at":"2024-09-24T13:49:12.049Z","updated_at":"2025-05-16T01:00:28.523Z","avatar_url":"https://github.com/Alfred-Skyblue.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/public/logo.svg\" alt=\"\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-draggable-plus\" target=\"__blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-draggable-plus?color=a1b858\u0026label=\" alt=\"NPM version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-draggable-plus\" target=\"__blank\"\u003e\u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/vue-draggable-plus?color=50a36f\u0026label=\"\u003e\u003c/a\u003e\n\u003ca href=\"https://alfred-skyblue.github.io/vue-draggable-plus/en/\" target=\"__blank\"\u003e\u003cimg src=\"https://img.shields.io/static/v1?label=\u0026message=docs%20%26%20demos\u0026color=1e8a7a\" alt=\"Docs \u0026 Demos\"\u003e\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"https://github.com/alfred-skyblue/vue-draggable-plus\" target=\"__blank\"\u003e\u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/alfred-skyblue/vue-draggable-plus?style=social\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# vue-draggable-plus\n\n[中文文档](https://vue-draggable-plus.pages.dev/)\n\n\nDrag and drop sorting module, support Vue\u003e=v3 or Vue\u003e=2.7\n\n[Example of use](https://stackblitz.com/edit/github-b2xatc-qe8qxj?file=src%2FApp.vue)\n\n## Describe\n\nSince the `vue3` component of `Sortablejs` has not been updated, it has been seriously out of touch with `vue3`, so this project was born. This component is based on `Sortablejs`, so if you want to know more about `Sortablejs`, you can check it out [`Sortablejs` official website](https://github.com/SortableJS/Sortable)\n\nWe have encapsulated a variety of usages for this, you can use components, function, or instructions, there is always one that suits you\n\n## Solve pain points\n\nIn `Sortablejs` official `Vue` components in the past, the drag-and-drop list is implemented by using the component as a direct child element of the list. When we use some component libraries, if there is no slot for the root element of the list in the component library , it is difficult for us to implement a drag list, vue-draggable-plus perfectly solves this problem, it allows you to use a drag list on any element, we can use the selector of the specified element to get the root element of the list, and then Use the root element of the list as `container` of `Sortablejs`, for details, refer to [specify target container](/src/__docs__/target-container/).\n\n\n## Install\n\n```bash\n\nnpm install vue-draggable-plus\n\n```\n\n## Usage\n\n### Component usage\n\n```vue\n\u003ctemplate\u003e\n    \u003cVueDraggable ref=\"el\" v-model=\"list\"\u003e\n      \u003cdiv v-for=\"item in list\" :key=\"item.id\"\u003e\n        {{ item.name }}\n      \u003c/div\u003e\n    \u003c/VueDraggable\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport { VueDraggable } from 'vue-draggable-plus'\n\nconst list = ref([\n  {\n    name: 'Joao',\n    id: 1\n  },\n  {\n    name: 'Jean',\n    id: 2\n  },\n  {\n    name: 'Johanna',\n    id: 3\n  },\n  {\n    name: 'Juan',\n    id: 4\n  }\n])\n\u003c/script\u003e\n```\n\n### Function Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv ref=\"el\"\u003e\n    \u003cdiv v-for=\"item in list\" :key=\"item.id\"\u003e\n      {{ item.name }}\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport { useDraggable } from 'vue-draggable-plus'\n\nconst el = ref\u003cHTMLElement | null\u003e(null)\nconst list = ref([\n  {\n    name: 'Joao',\n    id: 1\n  },\n  {\n    name: 'Jean',\n    id: 2\n  },\n  {\n    name: 'Johanna',\n    id: 3\n  },\n  {\n    name: 'Juan',\n    id: 4\n  }\n])\n// The return value is an object, which contains some methods, such as start, destroy, pause, etc.\nconst draggable = useDraggable(el, list, {\n  animation: 150,\n  onStart() {\n    console.log('start')\n  },\n  onUpdate() {\n    console.log('update')\n  }\n})\n\u003c/script\u003e\n```\n\n### Directive Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\n    v-draggable=\"[\n        list,\n        {\n          animation: 150,\n        }\n      ]\"\n  \u003e\n    \u003cdiv v-for=\"item in list\" :key=\"item.id\"\u003e\n      {{ item.name }}\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport { vDraggable } from 'vue-draggable-plus'\nconst list = ref([\n  {\n    name: 'Joao',\n    id: 1\n  },\n  {\n    name: 'Jean',\n    id: 2\n  },\n  {\n    name: 'Johanna',\n    id: 3\n  },\n  {\n    name: 'Juan',\n    id: 4\n  },\n  {\n    name: 'Yuan',\n    id: 5\n  }\n])\n\nfunction onStart() {\n  console.log('start')\n}\n\nfunction onUpdate() {\n  console.log('update')\n}\n\u003c/script\u003e\n```\n\n\n\n## Explanation\n\nAll event functions starting with `on` can be passed to components using `v-on`. For example:\n\n```vue\n\n\u003ctemplate\u003e\n  \u003cVueDraggable v-model=\"list\" @start=\"onStart\" @end=\"onEnd\"\u003e\u003c/VueDraggable\u003e\n\u003c/template\u003e\n\u003cscript lang=\"ts\" setup\u003e\nimport { ref } from \"vue\";\nimport { VueDraggable } from 'vue-draggable-plus'\nimport { SortableEvent } from \"sortablejs\";\n\nconst list = ref([\n  {\n    name: 'Joao',\n    id: '1'\n  },\n  {\n    name: 'Jean',\n    id: '2'\n  },\n  {\n    name: 'Johanna',\n    id: '3'\n  },\n  {\n    name: 'Juan',\n    id: '4'\n  }\n])\n\nfunction onStart(event: SortableEvent) {\n  console.log('start drag')\n}\n\nfunction onEnd(event: SortableEvent) {\n  console.log('end drag')\n}\n\u003c/script\u003e\n\n```\n\n\u003e For information on using Hooks and directives, please refer to the documentation.\n\n## Options\n\n`Options` inherits all configuration items from `Sortablejs`. For details, please see the [`Sortablejs` official documentation](https://github.com/SortableJS/Sortable).\n\n### Types\n```ts\ntype Easing =\n  | 'steps(int, start | end)'\n  | 'cubic-bezier(n, n, n, n)'\n  | 'linear'\n  | 'ease'\n  | 'ease-in'\n  | 'ease-out'\n  | 'ease-in-out'\n  | 'step-start'\n  | 'step-end'\n  | 'initial'\n  | 'inherit'\n\ntype PullResult = ReadonlyArray\u003cstring\u003e | boolean | 'clone';\ntype PutResult = ReadonlyArray\u003cstring\u003e | boolean;\n\ninterface GroupOptions {\n  /**\n   * Group name.\n   */\n  name: string;\n  /**\n   * The ability to move from the list. Clone - copy the item instead of moving it.\n   */\n  pull?: PullResult | ((to: Sortable, from: Sortable, dragEl: HTMLElement, event: SortableEvent) =\u003e PullResult) | undefined;\n  /**\n   * Whether elements can be added from other lists, or an array of group names from which elements can be obtained.\n   */\n  put?: PutResult | ((to: Sortable, from: Sortable, dragEl: HTMLElement, event: SortableEvent) =\u003e PutResult) | undefined;\n  /**\n   * After moving to another list, the cloned element is restored to its initial position.\n   */\n  revertClone?: boolean | undefined;\n}\n\ntype Group = string | GroupOptions | undefined;\n\ntype ScrollFn = ((\n        this: Sortable,\n        offsetX: number,\n        offsetY: number,\n        originalEvent: Event,\n        touchEvt: TouchEvent,\n        hoverTargetEl: HTMLElement,\n    ) =\u003e 'continue' | void) | undefined;\n```\n\n## API\n\n| Parameter                | Description                                                                                 | Type                                                  | Default              |\n|-------------------------|---------------------------------------------------------------------------------------------|-------------------------------------------------------|----------------------|\n| animation               | Show animation while dragging                                                               | `Number`                                              | 0                     |\n| chosenClass             | CSS class name for chosen item                                                              | `String`                                              | 'sortable-chosen'     |\n| delay                   | Delay in milliseconds before drag starts                                                    | `Number`                                              | 0                     |\n| delayOnTouchOnly        | Delay on touch event                                                                        | `Boolean`                                              | false                     |\n| direction               | Dragging direction, 'vertical' or 'horizontal' (default auto detect)                         | `String`                                              | -                     |\n| disabled                | Disable dragging                                                                            | `Boolean`                                             | false                 |\n| dragClass               | CSS class name for dragged item                                                              | `String`                                              | 'sortable-drag'       |\n| draggable               | Selector for draggable items within element                                                  | `String`                                              | -                     |\n| emptyInsertThreshold    | Distance (in pixels) from empty sortable items where dragging element should be inserted. Set to `0` to disable this feature.  | `Number`                                              | 5                     |\n| easing                  | Animation easing                                                                            | `Easing`                                              | -                     |\n| fallbackClass           | CSS class name for cloned DOM elements when using forceFallback                               | `String`                                              | `sortable-fallback`   |\n| fallbackOnBody          | Append cloned DOM element to body element                                                    | `Boolean`                                             | `false`               |\n| fallbackTolerance       | Pixels mouse must move before drag start when using forceFallback                             | `Number`                                              | 0                     |\n| filter                  | Selector for items that should not be draggable                                               | `String`                                              | -                     |\n| forceFallback           | Ignore HTML5 drag and drop behavior and force fallback                                        | `Boolean`                                             | `false`               |\n| ghostClass              | CSS class name for drop placeholder                                                          | `String`                                              | 'sortable-ghost'      |\n| group                   | Group items to drag between sortable lists. Both lists must have the same `group` value. Also define whether lists can be dragged out of, cloned, or receive elements from other lists. See TypeScript type definition above for details. | `Group`                                               | -                     |\n| handle                  | Selector for handle to initiate drag. If not set, the target element's children are used        | `String`                                              | -                     |\n| invertSwap              | Always use inverted swap zone if set to true                                                  | `Boolean`                                             | `false`               |\n| invertedSwapThreshold   | Inverted swap zone threshold, defaults to `swapThreshold` value                                | `Number`                                              | -                     |\n| preventOnFilter         | Call `event.preventDefault()` on filter event                                                | `Boolean`                                             | `true`                |\n| removeCloneOnHide       | Remove instead of hiding cloned element when not displayed                                     | `Boolean`                                             | `true`                |\n| sort                    | Allow list items to be sorted within container                                                 | `Boolean`                                             | `true`                |\n| swapThreshold           | Swap zone threshold                                                                         | `Number`                                              | 1                     |\n| touchStartThreshold     | Pixels before cancelling delay touch event                                                   | `Number`                                              | 1                     |\n| setData                 | Pass a function where the first argument is of type `DataTransfer` and the second argument is of type `HTMLElement` | `Function`                                            | -                     |\n| scroll                  | Enable scrolling                                                                            | `Boolean`                                             | `HTMLElement`         | `true`                |\n| scrollFn                | Custom scroll function                                                                      | `ScrollFn`                                            | -                     |\n| scrollSensitivity     | The distance in pixels the mouse must be to the edge to start scrolling                | `Number`                                             | -                    |\n| scrollSpeed           | The scrolling speed in ms/px                                                          | `number`                                             | -                    |\n| bubbleScroll          | Enables automatic scrolling for all parent elements to make it easier to move items   | `Boolean`                                            | `true`               |\n| onChoose              | Triggered when an item is selected                                                      | `((event: SortableEvent) =\u003e void)`                   | -                    |\n| onUnchoose            | Triggered when an item is deselected                                                    | `((event: SortableEvent) =\u003e void)`                   | -                    |\n| onStart               | Triggered when an item is picked up for drag and drop                                    | `((event: SortableEvent) =\u003e void)`                   | -                    |\n| onEnd                 | Triggered when an item is no longer being dragged                                       | `((event: SortableEvent) =\u003e void)`                   | -                    |\n| onAdd                 | Triggered when an item is moved from one list to another                                 | `((event: SortableEvent) =\u003e void)`                   | -                    |\n| onUpdate              | Triggered when the order of the items is updated                                        | `((event: SortableEvent) =\u003e void)`                   | -                    |\n| onSort                | Triggered whenever any changes are made to the list                                     | `((event: SortableEvent) =\u003e void)`                   | -                    |\n| onRemove              | Triggered when an item is removed from the list and moved to another                     | `((event: SortableEvent) =\u003e void)`                   | -                    |\n| onFilter              | Triggered when trying to drag a filtered item                                            | `((event: SortableEvent) =\u003e void)`                   | -                    |\n| onMove                | Triggered while an item is being dragged                                                | `((event: MoveEvent,originalEvent: Event) =\u003e void)`   | -                    |\n| onClone               | Triggered when an item is cloned                                                         | `((event: SortableEvent) =\u003e void)`                   | -                    |\n| onChange              | Triggered when an item is dragged and changes position                                   | `((event: SortableEvent) =\u003e void)`                   | -                    |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfred-skyblue%2Fvue-draggable-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falfred-skyblue%2Fvue-draggable-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfred-skyblue%2Fvue-draggable-plus/lists"}