How to Create Draggable Lists with Javascript - Code With Bishal


Learn how to Create Draggable Lists with Javascript

In this example you can learn how to Create a Draggable Lists with Javascript By Code With Bishal . Just Copy The Code From Here And Paste It Into Your Website and also don't forget to link the CSS and JS file. To Preview scroll the page. Draggable Lists is a lightweight and easy-to-use JS code that creates a Draggable List for you. In this blog, there are four sections on the webpage, in the first section you can get the overview of the blog, in the second section there are few more coding blogs you might like,in the third section you can see the demo of the Draggable List, after that you can copy the code and paste it [that's the fourth section]

You might like this :

Budget Calculator - using JS (JavaScript) and Bootstrap
Few days ago
Show current time using JS
Few days ago
DIV ANIMATION with the help of HTML5 AND CSS
Few days ago
Email Validation using HTML, CSS and JavaScript
Few days ago
Change Color of Div onclick
Few days ago


This is an example


Draggable Element One
Draggable Element Two
Draggable Element Three
Draggable Element Four
Draggable Element Five
Draggable Element Six
Draggable Element Seven
Draggable Element Eigth



HTML Code

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<title>Draggable Lists with Javascript - Code With Bishal</title>
</head>
<body>
/* by Code With Bishal - www.codewithbishal.com*/
<div class="wrapper">
<div class="item">
<span class="text">Draggable Element One </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Two </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Three </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Four </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Five </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Six </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Seven </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Eigth </span>
<i class="fas fa-bars"> </i>
</div>
</div>
</body>
</html>
Copy Contents

CSS Code

.wrapper{
padding: 25px;
max-width: 800px;
border-radius: 20px;
margin: 100px auto;
box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}

.wrapper .item{
color: #FF6F61;
align-items: center;
display: flex;
margin-bottom: 20px;
padding: 12px 17px;
background:#34568B;
border-radius:203px;
justify-content: space-between;
font-size: 50px;
}

JS(Javascript) Code

<script>
const CWB = document.querySelector(".wrapper");
new Sortable(CWB, {animation: 150});
</script>