1. 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 library.
vue-sortable
Package: vue-sortable
Created by: sagalbot
Last modified: Tue, 28 Jun 2022 20:24:52 GMT
Version: 0.1.3
License: MIT
Downloads: 19,080
Repository: https://github.com/sagalbot/vue-sortable

Install

npm install vue-sortable
yarn add vue-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 & Usage

Install using NPM

 npm install vue-sortable

Setup

 import Vue from 'vue'
import Sortable from 'vue-sortable'

Vue.use(Sortable)

Note that if you are not compiling Vue yourself, you just need to include <script src="path/to/vue-sortable.js>, and the plugin will be attached to the window at window.vSortable. In this case, you don't need to call Vue.use().

Contributing

I'd like to keep this as 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.

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin