vs

vue-sortable

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

Showing:

Popularity

Downloads/wk

2.7K

GitHub Stars

714

Maintenance

Last Commit

5yrs ago

Contributors

2

Package

Dependencies

1

Size (min+gzip)

14.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Drag & Drop

Readme

Vue Sortable Build Status

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

View Live Demo & Docs

Installation

NPM

npm install vue-sortable

Setup

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 <script> 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/vue-sortable@0.1.3"></script> # use a specific version
  • <script src="https://unpkg.com/vue-sortable@latest"></script> # use the latest version

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

View Live Example

<!DOCTYPE html>
<html>
<head>
  <!-- VueJS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
  <!-- SortableJS -->
  <script src="https://unpkg.com/sortablejs@1.4.2"></script>
  <!-- VueSortable -->
  <script src="https://unpkg.com/vue-sortable@0.1.3"></script>
</head>
<body>
    <ul v-sortable>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
    </ul>
    <script>
        new Vue({
          el: 'body'
        });
    </script>
</body>
</html>

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

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])
    }
  }
});
<ul v-sortable="{ onUpdate: onUpdate }">
    <li v-for="item in list">{{ item }}</li>
 </ul>

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.

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial