• Stars
    star
    719
  • Rank 61,395 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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