Repository: SortableJS/Vue.Draggable
Branch: master
Commit: 431db153bfdf
Files: 64
Total size: 12.0 MB
Directory structure:
gitextract_5xe_ehz6/
├── .circleci/
│ └── config.yml
├── .codebeatignore
├── .github/
│ └── issue_template.md
├── .gitignore
├── .vscode/
│ └── launch.json
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── babel.config.js
├── dist/
│ ├── demo.html
│ ├── vuedraggable.common.js
│ └── vuedraggable.umd.js
├── docs/
│ ├── app.js
│ └── index.html
├── documentation/
│ ├── Vue.draggable.for.ReadME.md
│ ├── legacy.options.md
│ └── migrate.md
├── example/
│ ├── App.vue
│ ├── components/
│ │ ├── clone-on-control.vue
│ │ ├── clone.vue
│ │ ├── custom-clone.vue
│ │ ├── footerslot.vue
│ │ ├── functional.vue
│ │ ├── handle.vue
│ │ ├── headerslot.vue
│ │ ├── infra/
│ │ │ ├── nested.vue
│ │ │ └── raw-displayer.vue
│ │ ├── nested/
│ │ │ ├── nested-store.js
│ │ │ └── nested-test.vue
│ │ ├── nested-example.vue
│ │ ├── nested-with-vmodel.vue
│ │ ├── simple.vue
│ │ ├── table-column-example.vue
│ │ ├── table-example.vue
│ │ ├── third-party.vue
│ │ ├── transition-example-2.vue
│ │ ├── transition-example.vue
│ │ ├── two-list-headerslots.vue
│ │ └── two-lists.vue
│ ├── debug-components/
│ │ ├── future-index.vue
│ │ ├── nested/
│ │ │ └── draggable-list.vue
│ │ └── slot-example.vue
│ ├── main.js
│ ├── route.js
│ └── store.js
├── jest.config.js
├── package.json
├── public/
│ └── index.html
├── src/
│ ├── util/
│ │ └── helper.js
│ ├── vuedraggable.d.ts
│ └── vuedraggable.js
├── tests/
│ └── unit/
│ ├── .eslintrc.js
│ ├── helper/
│ │ ├── DraggableWithList.vue
│ │ ├── DraggableWithModel.vue
│ │ ├── DraggableWithTransition.vue
│ │ ├── FakeComponent.js
│ │ └── FakeFunctionalComponent.js
│ ├── util/
│ │ ├── helper.node.spec.js
│ │ └── helper.spec.js
│ ├── vuedraggable.integrated.spec.js
│ ├── vuedraggable.script.tag.spec.js
│ ├── vuedraggable.spec.js
│ └── vuedraggable.ssr.spec.js
└── vue.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .circleci/config.yml
================================================
# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
build:
docker:
# specify the version you desire here
- image: circleci/node:10-browsers
# Specify service dependencies here if necessary
# CircleCI maintains a library of pre-built images
# documented at https://circleci.com/docs/2.0/circleci-images/
# - image: circleci/mongo:3.4.4
working_directory: ~/repo
steps:
- checkout
# Download and cache dependencies
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- run: yarn install
- save_cache:
paths:
- node_modules
key: v1-dependencies-{{ checksum "package.json" }}
# run tests!
- run: yarn test:coverage
================================================
FILE: .codebeatignore
================================================
docs/**
================================================
FILE: .github/issue_template.md
================================================
First check https://github.com/SortableJS/Vue.Draggable/blob/master/CONTRIBUTING.md
### Jsfiddle link
### Step by step scenario
### Actual Solution
### Expected Solution
================================================
FILE: .gitignore
================================================
node_modules
.tmp
.sass-cache
app/bower_components
test/bower_components
bower_components
examples/src
test/tmp
/test/tmp
/examples/src
/examples/libs/
/coverage
================================================
FILE: .vscode/launch.json
================================================
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest All",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": ["--runInBand"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
},
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"${relativeFile}",
"--config",
"jest.config.js"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
},
{
"type": "node",
"request": "launch",
"name": "Jest Vue Current File",
"program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service",
"args": [
"test:unit",
"${relativeFile}",
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service",
}
}
]
}
================================================
FILE: CONTRIBUTING.md
================================================
## How to contribute
#### **Did you find a bug?**
* **Ensure the bug was not already reported** by searching on GitHub under [Issues](https://github.com/SortableJS/Vue.Draggable/issues).
* **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))
* 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**.
#### **Do you have questions about how to use vue.draggable?**
* 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.
* Check [Sortable](https://github.com/RubaXa/Sortable) documentation.
* DO NOT OPEN ISSUE. Ask a question on [stackoverflow](https://stackoverflow.com) instead to get answer from the vue fantastic community.
#### **Did you write a correction that fixes a bug?**
* Open a new GitHub pull request with the code.
* Ensure the PR description clearly describes the problem and solution. Include the relevant issue number if applicable.
#### **Do you intend to add a new feature or change an existing one?**
* Open an issue proposing the enhancement explaining the rational and the added value.
* Once agreed you may submit the corresponding PR.
Thanks!
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2016-2019 David Desmaisons
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
Vue.Draggable
[](https://circleci.com/gh/SortableJS/Vue.Draggable)
[](https://codecov.io/gh/SortableJS/Vue.Draggable)
[](https://codebeat.co/projects/github-com-sortablejs-vue-draggable-master)
[](https://github.com/SortableJS/Vue.Draggable/issues?q=is%3Aopen+is%3Aissue)
[](https://www.npmjs.com/package/vuedraggable)
[](https://www.npmjs.com/package/vuedraggable)
[](https://www.npmjs.com/package/vuedraggable)
[](https://github.com/SortableJS/Vue.Draggable/blob/master/LICENSE)
Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.
Based on and offering all features of [Sortable.js](https://github.com/RubaXa/Sortable)
## For Vue 3
See [vue.draggable.next](https://github.com/SortableJS/vue.draggable.next)
## Demo
## Live Demos
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/
## Features
* Full support of [Sortable.js](https://github.com/RubaXa/Sortable) features:
* Supports touch devices
* Supports drag handles and selectable text
* Smart auto-scrolling
* Support drag and drop between different lists
* No jQuery dependency
* Keeps in sync HTML and view model list
* Compatible with Vue.js 2.0 transition-group
* Cancellation support
* Events reporting any changes when full control is needed
* 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
## Backers
Looking for backers!
## Donate
Find this project useful? You can buy me a :coffee: or a :beer:
[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=GYAEKQZJ4FQT2¤cy_code=USD&source=url)
## Installation
### With npm or yarn
```bash
yarn add vuedraggable
npm i -S vuedraggable
```
**Beware it is vuedraggable for Vue 2.0 and not vue-draggable which is for version 1.0**
### with direct link
```html
```
[cf example section](https://github.com/SortableJS/Vue.Draggable/tree/master/example)
## For Vue.js 2.0
Use draggable component:
### Typical use:
``` html
{{element.name}}
```
.vue file:
``` js
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
...
```
### With `transition-group`:
``` html
{{element.name}}
```
Draggable component should directly wrap the draggable elements, or a `transition-component` containing the draggable elements.
### With footer slot:
``` html
{{element.name}}
```
### With header slot:
``` html
{{element.name}}
```
### With Vuex:
```html
```
```javascript
computed: {
myList: {
get() {
return this.$store.state.myList
},
set(value) {
this.$store.commit('updateList', value)
}
}
}
```
### Props
#### value
Type: `Array`
Required: `false`
Default: `null`
Input array to draggable component. Typically same array as referenced by inner element v-for directive.
This is the preferred way to use Vue.draggable as it is compatible with Vuex.
It should not be used directly but only though the `v-model` directive:
```html
```
#### list
Type: `Array`
Required: `false`
Default: `null`
Alternative to the `value` prop, list is an array to be synchronized with drag-and-drop.
The main difference is that `list` prop is updated by draggable component using splice method, whereas `value` is immutable.
**Do not use in conjunction with value prop.**
#### All sortable options
New in version 2.19
Sortable options can be set directly as vue.draggable props since version 2.19.
This 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.
kebab-case propery are supported: for example `ghost-class` props will be converted to `ghostClass` sortable option.
Example setting handle, sortable and a group option:
```HTML
```
#### tag
Type: `String`
Default: `'div'`
HTML node type of the element that draggable component create as outer element for the included slot.
It is also possible to pass the name of vue component as element. In this case, draggable attribute will be passed to the create component.
See also [componentData](#componentdata) if you need to set props or event to the created component.
#### clone
Type: `Function`
Required: `false`
Default: `(original) => { return original;}`
Function 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.
By default vue.draggable reuses the viewModel element, so you have to use this hook if you want to clone or deep clone it.
#### move
Type: `Function`
Required: `false`
Default: `null`
If not null this function will be called in a similar way as [Sortable onMove callback](https://github.com/RubaXa/Sortable#move-event-object).
Returning false will cancel the drag operation.
```javascript
function onMoveCallback(evt, originalEvent){
...
// return false; — for cancel
}
```
evt object has same property as [Sortable onMove event](https://github.com/RubaXa/Sortable#move-event-object), and 3 additional properties:
- `draggedContext`: context linked to dragged element
- `index`: dragged element index
- `element`: dragged element underlying view model element
- `futureIndex`: potential index of the dragged element if the drop operation is accepted
- `relatedContext`: context linked to current drag operation
- `index`: target element index
- `element`: target element view model element
- `list`: target list
- `component`: target VueComponent
HTML:
```HTML
```
javascript:
```javascript
checkMove: function(evt){
return (evt.draggedContext.element.name!=='apple');
}
```
See 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)
#### componentData
Type: `Object`
Required: `false`
Default: `null`
This props is used to pass additional information to child component declared by [tag props](#tag).
Value:
* `props`: props to be passed to the child component
* `attrs`: attrs to be passed to the child component
* `on`: events to be subscribe in the child component
Example (using [element UI library](http://element.eleme.io/#/en-US)):
```HTML
{{e.description}}
```
```javascript
methods: {
handleChange() {
console.log('changed');
},
inputChanged(value) {
this.activeNames = value;
},
getComponentData() {
return {
on: {
change: this.handleChange,
input: this.inputChanged
},
attrs:{
wrap: true
},
props: {
value: this.activeNames
}
};
}
}
```
### Events
* Support for Sortable events:
`start`, `add`, `remove`, `update`, `end`, `choose`, `unchoose`, `sort`, `filter`, `clone`
Events are called whenever onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone are fired by Sortable.js with the same argument.
[See here for reference](https://github.com/RubaXa/Sortable#event-object-demo)
Note that SortableJS OnMove callback is mapped with the [move prop](https://github.com/SortableJS/Vue.Draggable/blob/master/README.md#move)
HTML:
```HTML
```
* change event
`change` event is triggered when list prop is not null and the corresponding array is altered due to drag-and-drop operation.
This event is called with one argument containing one of the following properties:
- `added`: contains information of an element added to the array
- `newIndex`: the index of the added element
- `element`: the added element
- `removed`: contains information of an element removed from to the array
- `oldIndex`: the index of the element before remove
- `element`: the removed element
- `moved`: contains information of an element moved within the array
- `newIndex`: the current index of the moved element
- `oldIndex`: the old index of the moved element
- `element`: the moved element
### Slots
Limitation: neither header or footer slot works in conjunction with transition-group.
#### Header
Use the `header` slot to add none-draggable element inside the vuedraggable component.
Important: it should be used in conjunction with draggable option to tag draggable element.
Note that header slot will always be added before the default slot regardless its position in the template.
Ex:
``` html
{{element.name}}
```
#### Footer
Use the `footer` slot to add none-draggable element inside the vuedraggable component.
Important: it should be used in conjunction with draggable option to tag draggable elements.
Note that footer slot will always be added after the default slot regardless its position in the template.
Ex:
``` html
