Skip to content

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

License

Notifications You must be signed in to change notification settings

sagalbot/vue-sortable

Repository files navigation

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.

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/[email protected]"></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/[email protected]"></script>
  <!-- VueSortable -->
  <script src="https://unpkg.com/[email protected]"></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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published