Create a mobile friendly sortable list with just 12 lines of javascript!

So, today I am going to share how to create a mobile friendly sortable list with just 12 lines of javascript!

Firstly, let's add the scripts to the the sortable js library and jquery!

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

Now, let's add the markup (list and a button) :

<ul id="my-list">
    <li>I Am Item 1</li>
    <li>I Am Item 2</li>
    <li>I Am Item 3</li>
    <li>I Am Item 4</li>
    <li>I Am Item 5</li>
</ul>
<button id="get-order">Get Order</button>

Now, let's add some styling to make it beautiful:

ul{
     list-style-type: none;
     margin: 0;
     padding: 0;
} 
li{
   padding: .75rem, 1.25rem;
   font-size:large;
   border: 2px #000 solid;
   background-color: #fff;
   padding: 10px;
}
.background-class{
    background-color: #e5e5e5;
    color: #e5e5e5;
}
button{
   background: coral;
   margin-top: 16px;
   color: #fff;
   padding: 5px;
   border-radius: 4px;
}

So, now our page looks like this:

Now, to make the list sortable we need to add the following javascript :

new Sortable(document.getElementById('my-list'), {
       animation: 150,
       ghostClass: 'background-class'
});

The sortable library itself handles animations!

Our list is now sortable, but we need to get the order at times, to do so we can add the following javascript! (I am using alert here to show the order directly onto the screen, only for debugging purposes!)

$('#get-order').click(function(){
       const items = document.querySelectorAll('li');
       const inTexts = [];
       for(var i = 0;i<items.length;i++){
            inTexts.push($(items[i]).text());
       }
       alert(inTexts);
})

You can see the demo here:

Or, you can visit this link for the demo: tanay360.github.io/Sortable-Demo

Complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable List</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <style>
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        li{
            padding: .75rem, 1.25rem;
            font-size:large;
            border: 2px #000 solid;
            background-color: #fff;
            padding: 10px;
        }
        .background-class{
            background-color: #e5e5e5;
            color: #e5e5e5;
        }
        button{
            background: coral;
            margin-top: 16px;
            color: #fff;
            padding: 5px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <ul id="my-list">
        <li>I Am Item 1</li>
        <li>I Am Item 2</li>
        <li>I Am Item 3</li>
        <li>I Am Item 4</li>
        <li>I Am Item 5</li>
    </ul>
    <button id="get-order">Get Order</button>
    <script>
        new Sortable(document.getElementById('my-list'), {
            animation: 150,
            ghostClass: 'background-class'
        });
        $('#get-order').click(function(){
            const items = document.querySelectorAll('li');
            const inTexts = [];
            for(var i = 0;i<items.length;i++){
                inTexts.push($(items[i]).text());
            }
            alert(inTexts);
        })
    </script>
</body>
</html>

So guys that's it for today! If you know some other way to create a mobile friendly sortable list, then please comment below!

Check out my apps: play.google.com/store/apps/developer?id=Tan..
Buy me a coffee☕: buymeacoffee.com/tanaygupta

Tanay's Blog

Tanay's Blog

Create a mobile friendly sortable list with just 12 lines of javascript!