Posted on March 1, 2021, 8 p.m. by Bishal ( 8639)
new Sortable(example1, {
animation: 150
});
example1
is the ID of the container containing the list items, and animation
is the animation duration in ms.
new Sortable(example2Left, {
group: 'shared', // set both lists to same group
animation: 150
});
new Sortable(example2Right, {
group: 'shared',
animation: 150
});
example2Left
and example2Right
are the IDs of the container containing the list.
var container = document.getElementById("container")
new Sortable(container, {
animation: 150
});
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<title>Draggable Lists with Javascript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
<div class="container" id="container">
<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>
script.js
<head> </head>
of your HTML document:<script src="script.js"></script>
script.js
file:var container = document.getElementById("container")
new Sortable(container, {
animation: 150
});
style.css
<head> </head>
of your HTML document:<link href="style.css" rel="stylesheet">
style.css
file:.container{
padding: 25px;
max-width: 800px;
border-radius: 20px;
margin: 100px auto;
box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}
.container .item{
color: #FFF;
align-items: center;
display: flex;
margin-bottom: 20px;
padding: 12px 17px;
background:#34568B;
border-radius:100px;
justify-content: space-between;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<title>Draggable Lists with Javascript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="container" id="container">
<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>
.container{
padding: 25px;
max-width: 800px;
border-radius: 20px;
margin: 100px auto;
box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}
.container .item{
color: #FFF;
align-items: center;
display: flex;
margin-bottom: 20px;
padding: 12px 17px;
background:#34568B;
border-radius:100px;
justify-content: space-between;
font-size: 30px;
}
var container = document.getElementById("container")
new Sortable(container, {
animation: 150
});