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: 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



Install package:

npm i -D jquery-sortablejs

Import into project:

import 'jquery-sortablejs';


<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>

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'

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link