jQuery Drag and Drop From one List to Another

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	Sortable JS
Author:	Sortable
Licence:	MIT Licence
Published:	January 20, 2024
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

Demo Download

Installation

Webpack/Browserify

Install package:

npm i -D jquery-sortablejs

Import into project:

import 'jquery-sortablejs';

CDN:

<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/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'
});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.