jQuery Drag and Drop From one List to Another

The Sortable is most popular and powerful JavaScript drag & drop sorting library. It also works with jQuery to create drag and drop from one list to another list. Mainly, you can create drag & drop based sorting functionality with the help of this plugin.

Plugin Overview

Plugin: Sortable JS
Author: Sortable
Licence: MIT Licence
Published: August 1, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version, Bootstrap 4.1.3
and Font Awesome 5 (Optional)
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 81.4 KB

Installation

Webpack/Browserify

Install package:

npm i -D jquery-sortablejs

Import into project:

import 'jquery-sortablejs';

CDN:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-sortable.js"></script>

How to Use jQuery Drag & Drop Sortable Lists

1. Load Bootstrap framework and jQuery to getting started with Sortable JS.

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. After that, also include plugin’s JavaScript & CSS files into your HTML document.

<!-- Sortable Assets-->
<script src="./Sortable.js"></script>
<link rel="stylesheet" type="text/css" href="st/theme.css">

3. Create HTML lists like below with a unique id that you want to sort with drag & drop.

<div id="simple-list" class="row">
<h4 class="col-12">Simple list example</h4>
   <div id="example1" class="list-group col">
    <div class="list-group-item">Item 1</div>
    <div class="list-group-item">Item 2</div>
    <div class="list-group-item">Item 3</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 6</div>
   </div>	
</div>

4. Call the plugin to active the jQuery drag and drop from one list to another sorting.

var example1 = document.getElementById('example1');

// Example 1 - Simple list
new Sortable(example1, {
	animation: 150,
	ghostClass: 'blue-background-class'
});