https://github.com/sagalbot/vue-sortable

A lightweight directive for reorderable drag-and-drop lists using RubaXa/Sortable
https://github.com/sagalbot/vue-sortable

Last synced: 4 months ago
JSON representation

A lightweight directive for reorderable drag-and-drop lists using RubaXa/Sortable

• Host: GitHub
• URL: https://github.com/sagalbot/vue-sortable
• Owner: sagalbot
• License: mit
• Created: 2016-04-06T15:47:45.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2020-08-21T15:45:06.000Z (over 4 years ago)
• Last Synced: 2024-10-13T22:10:18.797Z (4 months ago)
• Language: JavaScript
• Homepage: http://sagalbot.github.io/vue-sortable/
• Size: 413 KB
• Stars: 722
• Watchers: 17
• Forks: 104
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-vue-cn - vue-sortable ★19 - and-drop lists using [RubaXa/Sortable](https://github.com/RubaXa/Sortable). By [@sagalbot](https://github.com/sagalbot) (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Libraries & Plugins)
• awesome-vue - vue-sortable - sortable?style=social) - 轻松添加拖拽排序 (UI组件)
• awesome-github-vue - vue-sortable - 轻松添加拖拽排序 (UI组件)
• awesome-github-vue - vue-sortable - 轻松添加拖拽排序 (UI组件)
• awesome - vue-sortable - 轻松添加拖拽排序 (UI组件)

README

        
# Vue Sortable [![Build Status](https://travis-ci.org/sagalbot/vue-sortable.svg?branch=master)](https://travis-ci.org/sagalbot/vue-sortable)

> 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.

##### [View Live Demo & Docs](http://sagalbot.github.io/vue-sortable/)

Installation

--

#### NPM

```bash

npm install vue-sortable

```

Setup

```javascript

import Vue from 'vue'

import Sortable from 'vue-sortable'

Vue.use(Sortable)

```

#### Browser Globals

If you aren't using a build system, you probably just want to include a `` 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:

- `<script src="https://unpkg.com/[email protected]">     # use a specific version`

- `    # use the latest version`

Note that you will need to include `RubaXa/Sortable` & `Vue` before including `vue-sortable`.

[View Live Example](http://jsbin.com/vasogus/edit?html,js,console,output)

```html

  

  

  

  

  

  

    


      
Foo

      
Bar

      
Baz

    

    

        new Vue({

          el: 'body'

        });

    


```

Common Use Cases

--

#### Update Source Data Order

The below implementation will update the order of the source data after an item is sorted using the `sortable` `onUpdate` callback.

[View Live Example](http://jsbin.com/cicewo/edit?html,js,output)

```

new Vue({

  el: 'body',

  data: {

    list: ['Foo', 'Bar', 'Baz']

  },

  methods: {

    onUpdate: function (event) {

      this.list.splice(event.newIndex, 0, this.list.splice(event.oldIndex, 1)[0])

    }

  }

});

```

```



    
{{ item }}

 

```


Contributing

--

I'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.

The plugin is built using the vue-cli [webpack-simple template](https://github.com/vuejs-templates/webpack-simple).

``` bash

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

# build for demo site

npm run build

```

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).