[
{
"path": ".circleci/config.yml",
"content": "# Javascript Node CircleCI 2.0 configuration file\n#\n# Check https://circleci.com/docs/2.0/language-javascript/ for more details\n#\nversion: 2\njobs:\n build:\n docker:\n # specify the version you desire here\n - image: circleci/node:10-browsers\n \n # Specify service dependencies here if necessary\n # CircleCI maintains a library of pre-built images\n # documented at https://circleci.com/docs/2.0/circleci-images/\n # - image: circleci/mongo:3.4.4\n\n working_directory: ~/repo\n\n steps:\n - checkout\n\n # Download and cache dependencies\n - restore_cache:\n keys:\n - v1-dependencies-{{ checksum \"package.json\" }}\n # fallback to using the latest cache if no exact match is found\n - v1-dependencies-\n\n - run: yarn install\n\n - save_cache:\n paths:\n - node_modules\n key: v1-dependencies-{{ checksum \"package.json\" }}\n \n # run tests!\n - run: yarn test:coverage\n\n\n"
},
{
"path": ".codebeatignore",
"content": "docs/**"
},
{
"path": ".github/issue_template.md",
"content": "First check https://github.com/SortableJS/Vue.Draggable/blob/master/CONTRIBUTING.md\n\n### Jsfiddle link\n\n### Step by step scenario\n\n### Actual Solution\n\n### Expected Solution\n"
},
{
"path": ".gitignore",
"content": "node_modules\n.tmp\n.sass-cache\napp/bower_components\ntest/bower_components\nbower_components\nexamples/src\ntest/tmp\n/test/tmp\n/examples/src\n/examples/libs/\n/coverage\n"
},
{
"path": ".vscode/launch.json",
"content": "{\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"type\": \"node\",\n \"request\": \"launch\",\n \"name\": \"Jest All\",\n \"program\": \"${workspaceFolder}/node_modules/.bin/jest\",\n \"args\": [\"--runInBand\"],\n \"console\": \"integratedTerminal\",\n \"internalConsoleOptions\": \"neverOpen\",\n \"disableOptimisticBPs\": true,\n \"windows\": {\n \"program\": \"${workspaceFolder}/node_modules/jest/bin/jest\",\n }\n },\n {\n \"type\": \"node\",\n \"request\": \"launch\",\n \"name\": \"Jest Current File\",\n \"program\": \"${workspaceFolder}/node_modules/.bin/jest\",\n \"args\": [\n \"${relativeFile}\",\n \"--config\",\n \"jest.config.js\"\n ],\n \"console\": \"integratedTerminal\",\n \"internalConsoleOptions\": \"neverOpen\",\n \"disableOptimisticBPs\": true,\n \"windows\": {\n \"program\": \"${workspaceFolder}/node_modules/jest/bin/jest\",\n }\n },\n {\n \"type\": \"node\",\n \"request\": \"launch\",\n \"name\": \"Jest Vue Current File\",\n \"program\": \"${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service\",\n \"args\": [\n \"test:unit\",\n \"${relativeFile}\",\n ],\n \"console\": \"integratedTerminal\",\n \"internalConsoleOptions\": \"neverOpen\",\n \"disableOptimisticBPs\": true,\n \"windows\": {\n \"program\": \"${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service\",\n }\n }\n ]\n}"
},
{
"path": "CONTRIBUTING.md",
"content": "## How to contribute\n\n#### **Did you find a bug?**\n\n* **Ensure the bug was not already reported** by searching on GitHub under [Issues](https://github.com/SortableJS/Vue.Draggable/issues).\n\n* **Check if you are using the last version of vue.draggable and a compatible version of Sortable** (as indicated in the [README section](./README.md))\n\n* If you're unable to find an open issue addressing the problem, [open a new one](https://github.com/SortableJS/Vue.Draggable/issues/new). Be sure to respect issue template including a **title and clear description**, as much relevant information as possible, and a [**jsfiddle**](http://jsfiddle.net/) (or similar online tool) containing an sample demonstrating the bug. Explain the **step by step scenario** as well as the **actual result** as opposed as the **expected result**.\n\n#### **Do you have questions about how to use vue.draggable?**\n\n* Check [README section](./README.md) section as well as [Issues](https://github.com/SortableJS/Vue.Draggable/issues) to see if a similar question has been asked and answered.\n\n* Check [Sortable](https://github.com/RubaXa/Sortable) documentation.\n\n* DO NOT OPEN ISSUE. Ask a question on [stackoverflow](https://stackoverflow.com) instead to get answer from the vue fantastic community.\n\n#### **Did you write a correction that fixes a bug?**\n\n* Open a new GitHub pull request with the code.\n\n* Ensure the PR description clearly describes the problem and solution. Include the relevant issue number if applicable.\n\n#### **Do you intend to add a new feature or change an existing one?**\n\n* Open an issue proposing the enhancement explaining the rational and the added value.\n\n* Once agreed you may submit the corresponding PR.\n\nThanks!\n"
},
{
"path": "LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) 2016-2019 David Desmaisons\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "
\n
Vue.Draggable
\n\n[](https://circleci.com/gh/SortableJS/Vue.Draggable)\n[](https://codecov.io/gh/SortableJS/Vue.Draggable)\n[](https://codebeat.co/projects/github-com-sortablejs-vue-draggable-master)\n[](https://github.com/SortableJS/Vue.Draggable/issues?q=is%3Aopen+is%3Aissue)\n[](https://www.npmjs.com/package/vuedraggable)\n[](https://www.npmjs.com/package/vuedraggable)\n[](https://www.npmjs.com/package/vuedraggable)\n[](https://github.com/SortableJS/Vue.Draggable/blob/master/LICENSE)\n\n\nVue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.\n\nBased on and offering all features of [Sortable.js](https://github.com/RubaXa/Sortable)\n\n\n## For Vue 3\n See [vue.draggable.next](https://github.com/SortableJS/vue.draggable.next)\n\n## Demo\n\n\n\n## Live Demos\n\nhttps://sortablejs.github.io/Vue.Draggable/\n\nhttps://david-desmaisons.github.io/draggable-example/\n\n## Features\n\n* Full support of [Sortable.js](https://github.com/RubaXa/Sortable) features:\n * Supports touch devices\n * Supports drag handles and selectable text\n * Smart auto-scrolling\n * Support drag and drop between different lists\n * No jQuery dependency\n* Keeps in sync HTML and view model list\n* Compatible with Vue.js 2.0 transition-group\n* Cancellation support\n* Events reporting any changes when full control is needed\n* Reuse existing UI library components (such as [vuetify](https://vuetifyjs.com), [element](http://element.eleme.io/), or [vue material](https://vuematerial.io) etc...) and make them draggable using `tag` and `componentData` props\n\n## Backers\n\nLooking for backers!\n\n## Donate\n\nFind this project useful? You can buy me a :coffee: or a :beer:\n\n[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=GYAEKQZJ4FQT2¤cy_code=USD&source=url)\n\n\n## Installation\n\n### With npm or yarn \n\n```bash\nyarn add vuedraggable\n\nnpm i -S vuedraggable\n```\n\n**Beware it is vuedraggable for Vue 2.0 and not vue-draggable which is for version 1.0**\n\n### with direct link \n```html\n\n\n\n\n\n\n\n```\n\n[cf example section](https://github.com/SortableJS/Vue.Draggable/tree/master/example)\n\n## For Vue.js 2.0\n\nUse draggable component:\n\n### Typical use:\n``` html\n\n
{{element.name}}
\n\n```\n.vue file:\n``` js\n import draggable from 'vuedraggable'\n ...\n export default {\n components: {\n draggable,\n },\n ...\n```\n\n### With `transition-group`:\n``` html\n\n \n
\n {{element.name}}\n
\n \n\n```\n\nDraggable component should directly wrap the draggable elements, or a `transition-component` containing the draggable elements.\n\n\n### With footer slot:\n``` html\n\n
\n {{element.name}}\n
\n \n\n```\n### With header slot:\n``` html\n\n
\n {{element.name}}\n
\n \n\n```\n\n### With Vuex:\n\n```html\n\n``` \n\n```javascript\ncomputed: {\n myList: {\n get() {\n return this.$store.state.myList\n },\n set(value) {\n this.$store.commit('updateList', value)\n }\n }\n}\n```\n\n\n### Props\n#### value\nType: `Array` \nRequired: `false` \nDefault: `null`\n\nInput array to draggable component. Typically same array as referenced by inner element v-for directive. \nThis is the preferred way to use Vue.draggable as it is compatible with Vuex. \nIt should not be used directly but only though the `v-model` directive:\n```html\n\n```\n\n#### list\nType: `Array` \nRequired: `false` \nDefault: `null`\n\nAlternative to the `value` prop, list is an array to be synchronized with drag-and-drop. \nThe main difference is that `list` prop is updated by draggable component using splice method, whereas `value` is immutable. \n**Do not use in conjunction with value prop.**\n\n#### All sortable options\nNew in version 2.19\n\nSortable options can be set directly as vue.draggable props since version 2.19.\n\nThis means that all [sortable option](https://github.com/RubaXa/Sortable#options) are valid sortable props with the notable exception of all the method starting by \"on\" as draggable component expose the same API via events.\n\nkebab-case propery are supported: for example `ghost-class` props will be converted to `ghostClass` sortable option.\n\nExample setting handle, sortable and a group option:\n```HTML\n\n \n\n```\n\n#### tag\nType: `String` \nDefault: `'div'`\n\nHTML node type of the element that draggable component create as outer element for the included slot. \nIt is also possible to pass the name of vue component as element. In this case, draggable attribute will be passed to the create component. \nSee also [componentData](#componentdata) if you need to set props or event to the created component.\n\n#### clone\nType: `Function` \nRequired: `false` \nDefault: `(original) => { return original;}` \n\nFunction called on the source component to clone element when clone option is true. The unique argument is the viewModel element to be cloned and the returned value is its cloned version. \nBy default vue.draggable reuses the viewModel element, so you have to use this hook if you want to clone or deep clone it.\n\n#### move\nType: `Function` \nRequired: `false` \nDefault: `null` \n\nIf not null this function will be called in a similar way as [Sortable onMove callback](https://github.com/RubaXa/Sortable#move-event-object).\nReturning false will cancel the drag operation.\n\n```javascript\nfunction onMoveCallback(evt, originalEvent){\n ...\n // return false; — for cancel\n}\n```\nevt object has same property as [Sortable onMove event](https://github.com/RubaXa/Sortable#move-event-object), and 3 additional properties:\n - `draggedContext`: context linked to dragged element\n - `index`: dragged element index\n - `element`: dragged element underlying view model element\n - `futureIndex`: potential index of the dragged element if the drop operation is accepted\n - `relatedContext`: context linked to current drag operation\n - `index`: target element index\n - `element`: target element view model element\n - `list`: target list\n - `component`: target VueComponent\n\nHTML:\n```HTML\n\n```\njavascript:\n```javascript\ncheckMove: function(evt){\n return (evt.draggedContext.element.name!=='apple');\n}\n```\nSee complete example: [Cancel.html](https://github.com/SortableJS/Vue.Draggable/blob/master/examples/Cancel.html), [cancel.js](https://github.com/SortableJS/Vue.Draggable/blob/master/examples/script/cancel.js)\n\n#### componentData\nType: `Object` \nRequired: `false` \nDefault: `null` \n\nThis props is used to pass additional information to child component declared by [tag props](#tag). \nValue:\n* `props`: props to be passed to the child component\n* `attrs`: attrs to be passed to the child component\n* `on`: events to be subscribe in the child component\n\nExample (using [element UI library](http://element.eleme.io/#/en-US)):\n```HTML\n\n \n
{{e.description}}
\n \n\n```\n```javascript\nmethods: {\n handleChange() {\n console.log('changed');\n },\n inputChanged(value) {\n this.activeNames = value;\n },\n getComponentData() {\n return {\n on: {\n change: this.handleChange,\n input: this.inputChanged\n },\n attrs:{\n wrap: true\n },\n props: {\n value: this.activeNames\n }\n };\n }\n }\n```\n\n### Events\n\n* Support for Sortable events:\n\n `start`, `add`, `remove`, `update`, `end`, `choose`, `unchoose`, `sort`, `filter`, `clone` \n Events are called whenever onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone are fired by Sortable.js with the same argument. \n [See here for reference](https://github.com/RubaXa/Sortable#event-object-demo)\n\n Note that SortableJS OnMove callback is mapped with the [move prop](https://github.com/SortableJS/Vue.Draggable/blob/master/README.md#move)\n\nHTML:\n```HTML\n\n```\n\n* change event\n\n `change` event is triggered when list prop is not null and the corresponding array is altered due to drag-and-drop operation. \n This event is called with one argument containing one of the following properties:\n - `added`: contains information of an element added to the array\n - `newIndex`: the index of the added element\n - `element`: the added element\n - `removed`: contains information of an element removed from to the array\n - `oldIndex`: the index of the element before remove\n - `element`: the removed element\n - `moved`: contains information of an element moved within the array\n - `newIndex`: the current index of the moved element\n - `oldIndex`: the old index of the moved element\n - `element`: the moved element\n\n### Slots\n\nLimitation: neither header or footer slot works in conjunction with transition-group.\n\n#### Header\nUse the `header` slot to add none-draggable element inside the vuedraggable component.\nImportant: it should be used in conjunction with draggable option to tag draggable element.\nNote that header slot will always be added before the default slot regardless its position in the template.\nEx:\n\n``` html\n\n
\n {{element.name}}\n
\n \n\n```\n\n#### Footer\nUse the `footer` slot to add none-draggable element inside the vuedraggable component.\nImportant: it should be used in conjunction with draggable option to tag draggable elements.\nNote that footer slot will always be added after the default slot regardless its position in the template.\nEx:\n\n``` html\n\n