{"id":22485294,"url":"https://github.com/amendx/vue-dndrop","last_synced_at":"2025-05-15T14:07:14.031Z","repository":{"id":39857739,"uuid":"394767253","full_name":"amendx/vue-dndrop","owner":"amendx","description":":herb: A vue library for drag and drop :sparkles:","archived":false,"fork":false,"pushed_at":"2024-12-13T15:04:33.000Z","size":1246,"stargazers_count":223,"open_issues_count":26,"forks_count":23,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-05T13:04:00.694Z","etag":null,"topics":["dnd","drag","drag-and-drop","draggable","draggable-elements","drop","hacktoberfest","vue","vue-drag","vue-drag-and-drop","vue-js"],"latest_commit_sha":null,"homepage":"https://amendx.github.io/vue-dndrop","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/amendx.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}},"created_at":"2021-08-10T19:58:45.000Z","updated_at":"2025-05-02T13:28:32.000Z","dependencies_parsed_at":"2023-10-20T16:47:56.689Z","dependency_job_id":"0f664eb8-29af-4ae6-b419-98187431946e","html_url":"https://github.com/amendx/vue-dndrop","commit_stats":{"total_commits":186,"total_committers":4,"mean_commits":46.5,"dds":"0.13978494623655913","last_synced_commit":"3abf44a0183094037d944c0b4118774315d68e30"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amendx%2Fvue-dndrop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amendx%2Fvue-dndrop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amendx%2Fvue-dndrop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amendx%2Fvue-dndrop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amendx","download_url":"https://codeload.github.com/amendx/vue-dndrop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355335,"owners_count":22057354,"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":["dnd","drag","drag-and-drop","draggable","draggable-elements","drop","hacktoberfest","vue","vue-drag","vue-drag-and-drop","vue-js"],"created_at":"2024-12-06T17:12:19.715Z","updated_at":"2025-05-15T14:07:09.015Z","avatar_url":"https://github.com/amendx.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://amendx.github.io/vue-dndrop\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/30783877/135903129-ec4df6f1-28e9-4cb2-8a06-025991c807b3.png\" alt=\"vue-dndrop logo\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nA Vue.js drag and drop library.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-dndrop\"\u003e\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/vue-dndrop.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/npm/dt/vue-dndrop\" alt=\"npm downloads\" /\u003e\n\u003cimg src=\"https://img.shields.io/github/license/amendx/vue-dndrop.svg\" alt=\"mit license\" /\u003e\n\u003cimg src=\"https://badgen.net/github/last-commit/amendx/vue-dndrop\" alt=\"commit\" /\u003e\n\u003cimg src=\"https://github.com/amendx/vue-dndrop/actions/workflows/deploy.yml/badge.svg\" alt=\"github pages\" /\u003e\n\u003c/p\u003e\n\n## Intro\n\nA fast and lightweight drag \u0026 drop library for Vue.js with **so many** configurations options, covering multiple scenarios. Please, check all of its features here:\n\n### [Documentation](https://amendx.github.io/vue-dndrop) 🎉\n\n## Table of contents\n\n- [Installation](#installation)\n- [Demo](#demo)\n- [Example](#example)\n\n### API\n\n- [Container](#container)\n- [Lifecycle](#lifecycle)\n- [Callbacks](#callbacks)\n- [Events](#events)\n- [Draggable](#draggable)\n\n## Installation\n\n##### **This library is now supported for both Vue 2 and Vue 3 versions**\n\n- `vue 2.x`:\n\n```shell\nnpm i vue-dndrop\n```\n\n- `vue 3.x`:\n\n```shell\nnpm i vue-dndrop@next\n```\n\n\u003e This library consists on a wrapper for Vue.js components over the long missed [smooth-dnd](https://github.com/kutlugsahin/smooth-dnd) library. To make it less _importee_, all the content imported from `smooth-dnd` is now on our own library. It's all plain Javascript now.\n\n### Contributors\n\n\u003ca href=\"https://github.com/amendx/vue-dndrop/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=amendx/vue-dndrop\"/\u003e\n\u003c/a\u003e\n\n---\n\n## Demo\n\nTake a look at the full docs here. There's a lot of examples, details and more.\n\n- https://amendx.github.io/vue-dndrop\n\n## Example\n\n![Example](https://user-images.githubusercontent.com/30783877/135848769-bbaf7f32-81b8-4958-9f3b-5bc009b56a1d.gif)\n\n### Vue\n\n```jsx\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"simple-page\"\u003e\n        \u003cContainer @drop=\"onDrop\"\u003e\n          \u003cDraggable v-for=\"item in items\" :key=\"item.id\"\u003e\n            \u003cdiv class=\"draggable-item\"\u003e\n              {{item.data}}\n            \u003c/div\u003e\n          \u003c/Draggable\u003e\n        \u003c/Container\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { Container, Draggable } from \"vue-dndrop\";\nimport { applyDrag, generateItems } from \"./utils\";\nexport default {\n  name: \"Simple\",\n  components: { Container, Draggable },\n  data() {\n    return {\n      items: generateItems(50, i =\u003e ({ id: i, data: \"Draggable \" + i }))\n    };\n  },\n  methods: {\n    onDrop(dropResult) {\n      this.items = applyDrag(this.items, dropResult);\n    }\n  }\n};\n\u003c/script\u003e\n```\n\n## Container\n\nComponent that contains the draggable elements or components. Each of its children should be wrapped by **Draggable** component\n\n### Properties\n\nProperties define the visual behaviour of the library:\n\n| Property                  |           Type            |            Default            | Description                                                                                                                                                                                                   |\n| ------------------------- | :-----------------------: | :---------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| :orientation              |          string           |          `vertical`           | Orientation of the container. Can be **horizontal** or **vertical**.                                                                                                                                          |\n| :behaviour                |          string           |            `move`             | Property to describe wether the dragging item will be moved or copied to target container. Can be **move** or **copy** or **drop-zone** or **contain**.                                                      |\n| :tag                      | string or NodeDescription |             `div`             | _See descriptions below_                                                                                                                                                                                      |\n| :group-name               |          string           |          `undefined`          | Draggables can be moved between the containers having the same group names. If not set container will not accept drags from outside. This behaviour can be overwritten by shouldAcceptDrop function. See below. |\n| :lock-axis                |          string           |          `undefined`          | Locks the movement axis of the dragging. Possible values are **x**, **y** or **undefined**.                                                                                                                   |\n| :drag-handle-selector     |          string           |          `undefined`          | Css selector to test for enabling dragging. If not given item can be grabbed from anywhere in its boundaries.                                                                                                 |\n| :non-drag-area-selector   |          string           |          `undefined`          | Css selector to prevent dragging. Can be useful when you have form elements or selectable text somewhere inside your draggable item. It has a precedence over **dragHandleSelector**.                         |\n| :drag-begin-delay         |          number           | `0` (`200` for touch devices) | Time in milisecond. Delay to start dragging after item is pressed. Moving cursor before the delay more than 5px will cancel dragging.                                                                         |\n| :animation-duration       |          number           |             `250`             | Animation duration in milisecond. To be consistent this animation duration will be applied to both drop and reorder animations.                                                                               |\n| :auto-scroll-enabled      |          boolean          |            `true`             | First scrollable parent will scroll automatically if dragging item is close to boundaries.                                                                                                                    |\n| :drag-class               |          string           |          `undefined`          | Class to be added to the ghost item being dragged. The class will be added after it's added to the DOM so any transition in the class will be applied as intended.                                            |\n| :drop-class               |          string           |          `undefined`          | Class to be added to the ghost item just before the drop animation begins.                                                                                                                                    |\n| :remove-on-drop-out       |          boolean          |          `undefined`          | When set true onDrop will be called with a removedIndex if you drop element out of any relevant container                                                                                                     |\n| :drop-placeholder         |      boolean,object       |          `undefined`          | Options for drop placeholder. **className**, **animationDuration**, **showOnTop**                                                                                                                             |\n| :fire-related-events-only |          boolean          |            `false`            | Defines if only events related to the selected containers will be fired                                                                                                                                       |\n\n### `tag`\n\nTag name or the node definition to render the root element of the Container.\nDefault value is 'div'.\n\n```ts\n:tag=\"{value: 'table', props: {class: 'my-table'}}\"\n```\n\n```ts\ntag = \"table\";\n```\n\n#### Possible values\n\n- string : The tag name of the root element to be created\n- object : Node definition\n  - value: string : tag name\n  - props: data object to define element properties. see [https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)\n\n---\n\n## Lifecycle\n\nThe lifecycle of a drag is both described, and can be controlled, by a series of [callbacks](#callbacks) and [events](#events), which are illustrated below for a example **containing 3 containers**:\n\n```\nMouse     Calls  Callback / Event       Parameters              Notes\n\ndown   o                                                        Initial click\n\nmove   o                                                        Initial drag\n       |\n       |         get-child-payload()    index                   Function should return payload\n       |\n       |   3 x   should-accept-drop()   srcOptions, payload     Fired for all containers\n       |\n       |   3 x   drag-start             dragResult              Fired for all containers\n       |\n       |         drag-enter\n       v\n\nmove   o                                                        Drag over containers\n       |\n       |   n x   drag-leave                                     Fired as draggable leaves container\n       |   n x   drag-enter                                     Fired as draggable enters container\n       v\n\nup     o                                                        Finish drag\n\n                 should-animate-drop()  srcOptions, payload     Fires once for dropped container\n\n           3 x   drag-end               dragResult              Fired for all containers\n\n           n x   drop                   dropResult              Fired only for droppable containers\n```\n\n\u003e Note that `should-accept-drop` is fired before every `drag-start`, and before every `drag-end`, but has been omitted here for clarity.\n\nThe `dragResult` parameter has the following format:\n\n```js\ndragResult: {\n    payload,\n    isSource,\n    willAcceptDrop,\n}\n```\n\nThe `dropResult` parameter has the following format:\n\n```js\ndropResult: {\n    addedIndex,\n    removedIndex,\n    payload,\n    element,\n}\n```\n\n\u003e Note that additional parameters can be passed to callbacks and event handlers by writing an interim handler _inline_ in the markup:\n\n```jsx\n\u003cdiv v-for=\"(items, index) in groups\"\n  \u003cContainer group-name=\"column\"\n    :should-accept-drop=\"(src, payload) =\u003e getShouldAcceptDrop(index, src, payload)\"\n    \u003e\n    ...\n  \u003c/Container\u003e\n\u003c/div\u003e\n```\n\nThis can provide handler functions context-sensitive data, such as the loop index or current item.\n\n## Callbacks\n\nCallbacks provide additional logic and checks before and during user interaction.\n\n### `get-child-payload()`\n\nThe function to be called to get the payload object to be passed **onDrop** function.\n\n```jsx\n\u003cContainer :get-child-payload=\"getChildPayload\"\u003e\n```\n\n```ts\ngetChildPayload (index) {\n  return {\n    // generate custom payload data here\n  }\n}\n```\n\n#### Parameters\n\n- **index** : `number` : index of the child item\n\n#### Returns\n\n- **payload** : `object`\n\n### `should-accept-drop()`\n\nThe function to be called by all containers before drag starts to determine the containers to which the drop is possible. Setting this function will override the **group-name** property and only the return value of this function will be taken into account.\n\n```jsx\n\u003cContainer :should-accept-drop=\"shouldAcceptDrop\"\u003e\n```\n\n```ts\nshouldAcceptDrop (sourceContainerOptions, payload) {\n  return true;\n}\n```\n\n#### Parameters\n\n- **sourceContainerOptions** : `object` : options of the source container. (parent container of the dragged item)\n- **payload** : `object` : the payload object retrieved by calling [get-child-payload](#get-child-payload) function.\n\n#### Returns\n\n- **boolean** : **true / false**\n\n### `should-animate-drop()`\n\nThe function to be called by the target container to which the dragged item will be dropped.\nSometimes dragged item's dimensions are not suitable with the target container and dropping animation can be wierd. So it can be disabled by returning **false**. If not set drop animations are enabled.\n\n```jsx\n\u003cContainer :should-animate-drop=\"shouldAnimateDrop\"\u003e\n```\n\n```ts\nshouldAnimateDrop (sourceContainerOptions, payload) {\n  return false;\n}\n```\n\n#### Parameters\n\n- **sourceContainerOptions** : `object` : options of the source container. (parent container of the dragged item)\n- **payload** : `object` : the payload object retrieved by calling [get-child-payload](#get-child-payload) function.\n\n#### Returns\n\n- **boolean** : **true / false**\n\n### `get-ghost-parent()`\n\nThe function to be called to get the element that the dragged ghost will be appended. Default parent element is the container itself.\nThe ghost element is positioned as 'fixed' and appended to given parent element.\nBut if any anchestor of container has a transform property, ghost element will be positioned relative to that element which breaks the calculations. Thats why if you have any transformed parent element of Containers you should set this property so that it returns any element that has not transformed parent element.\n\n```jsx\n\u003cContainer :get-ghost-parent=\"getGhostParent\"\u003e\n```\n\n```ts\ngetGhostParent() {\n  // i.e return document.body;\n}\n```\n\n#### Returns\n\n- **Element** : **Any DOM element that the ghost will be appended in**\n\n---\n\n## Events\n\nEvents may call user-defined handlers at particular points in the drag-and-drop lifecycle.\n\n### `@drag-start`\n\nEvent to be emitted by all containers on drag start.\n\n```jsx\n\u003cContainer @drag-start=\"onDragStart\"\u003e\n```\n\n```ts\nonDragStart (dragResult) {\n  const { isSource, payload, willAcceptDrop } = dragResult\n}\n```\n\n#### Parameters\n\n- **dragResult** : `object`\n\n  - **payload** : `object` : the payload object that is returned by [get-child-payload](#get-child-payload). It will be undefined in case get-child-payload is not set.\n  - **isSource** : `boolean` : true if it is called by the container which drag starts from otherwise false.\n  - **willAcceptDrop** : `boolean` : true if the dragged item can be dropped into the container, otherwise false.\n\n### `@drag-end`\n\nThe function to be called by all containers on drag end. Called before [drop](#drop) event.\n\n```jsx\n\u003cContainer @drag-end=\"onDragEnd\"\u003e\n```\n\n```ts\nonDragEnd (dragResult) {\n  const { isSource, payload, willAcceptDrop } = dragResult\n}\n```\n\n#### Parameters\n\n- **dragResult** : `object`\n\n  - **isSource** : `boolean` : true if it is called by the container which drag starts from, otherwise false.\n  - **payload** : `object` : the payload object that is returned by [get-child-payload](#get-child-payload) function. It will be undefined in case get-child-payload is not set.\n  - **willAcceptDrop** : `boolean` : true if the dragged item can be dropped into the container, otherwise false.\n\n### `@drag-enter`\n\nThe event to be emitted by the relevant container whenever a dragged item enters its boundaries while dragging.\n\n```jsx\n\u003cContainer @drag-enter=\"onDragEnter\"\u003e\n```\n\n```ts\nonDragEnter () {\n  ...\n}\n```\n\n### `@drag-leave`\n\nThe event to be emitted by the relevant container whenever a dragged item leaves its boundaries while dragging.\n\n```jsx\n\u003cContainer @drag-leave=\"onDragLeave\"\u003e\n```\n\n```ts\nonDragLeave () {\n  ...\n}\n```\n\n### `@drop-ready`\n\nThe function to be called by the container which is being drag over, when the index of possible drop position changed in container. Basically it is called each time the draggables in a container slides for opening a space for dragged item. **dropResult** is the only parameter passed to the function which contains the following properties.\n\n```jsx\n\u003cContainer @drop-ready=\"onDropReady\"\u003e\n```\n\n```js\nonDropReady(dropResult) {\n  const { removedIndex, addedIndex, payload, element } = dropResult;\n  ...\n}\n```\n\n#### Parameters\n\n- **dropResult** : `object`\n  - **removedIndex** : `number` : index of the removed children. Will be `null` if no item is removed.\n  - **addedIndex** : `number` : index to add droppped item. Will be `null` if no item is added.\n  - **payload** : `object` : the payload object retrieved by calling _getChildPayload_ function.\n  - **element** : `DOMElement` : the DOM element that is moved\n\n### `@drop`\n\nThe event to be emitted by any relevant container when drop is over. (After drop animation ends). Source container and any container that could accept drop is considered relevant.\n\n```jsx\n\u003cContainer @drop=\"onDrop\"\u003e\n```\n\n```ts\nonDrop (dropResult) {\n  const { removedIndex, addedIndex, payload, element } = dropResult;\n  ...\n}\n```\n\n#### Parameters\n\n- **dropResult** : `object`\n\n  - **removedIndex** : `number` : index of the removed child. Will be `null` if no item is removed.\n  - **addedIndex** : `number` : index to add dropped item. Will be `null` if no item is added.\n  - **payload** : `object` : the payload object retrieved by calling [get-child-payload](#get-child-payload) function.\n  - **element** : `DOMElement` : the DOM element that is moved\n\n### `@drop-not-allowed`\n\nEvent to be emitted by the current container when drop is not allowed or does not fit the rule applied inside the column/element validation.\n\n```jsx\n\u003cContainer @drop-not-allowed=\"dropNotAllowed\"\u003e\n```\n\n```ts\ndropNotAllowed ({payload, container}) {\n  return false\n}\n```\n\n#### Parameters\n\n- **payload** : `object` : the payload object that is returned by [get-child-payload](#get-child-payload). It will be undefined in case get-child-payload is not set.\n- **container** : `object` : return the container which the current payload was unable to be dropped.\n\n#### Parameters\n\n- **dragResult** : `object`\n\n  - **payload** : `object` : the payload object that is returned by [get-child-payload](#get-child-payload). It will be undefined in case get-child-payload is not set.\n  - **isSource** : `boolean` : true if it is called by the container which drag starts from otherwise false.\n  - **willAcceptDrop** : `boolean` : true if the dragged item can be dropped into the container, otherwise false.\n\n## Draggable\n\nWrapper component for Container's children. Every child element should be wrapped with **Draggable** component.\n\n### Properties\n\n### `tag`\n\nTag name or the node definition to render the root element of the Draggable.\nDefault value is 'div'.\n\n```jsx\n:tag=\"{value: 'tr', props: {class: 'my-table-row'}}\"\n```\n\n```jsx\ntag = \"tr\";\n```\n\n#### Possible values\n\n- string : The tag name of the root element to be created\n- object : Node definition\n  - value: string : tag name\n  - props: data object to define element properties. see [https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famendx%2Fvue-dndrop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famendx%2Fvue-dndrop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famendx%2Fvue-dndrop/lists"}