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]
<!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>
.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;
}
<script>
const CWB = document.querySelector(".wrapper");
new Sortable(CWB, {animation: 150});
</script>