Hello friends, today in this blog, you will learn how to create drag & drop or sortable lists using HTML, CSS, and Sortable JS. In our previous blog, we saw how to create drag & drop or browse features in Javascript. Earlier, I shared many projects related to javascript, you can check if you want, and don't forget to check HTML, CSS, and Javascript projects.
Drag and drop is a marking device gesture in which the user selects a virtual thing by “grabbing” it and dragging it to a separate area or onto another virtual thing. Sortable JS is a Javascript library that lets you sort or reorder lists by dragging and dropping list items.
You may like these:
- How to create a toast alert
- Restaurant Menu With Filter Option in React JS
- How to create a todo list app
- Awesome Neumorphism Social Icon Button with Tooltip
In this program [Drag & Drop List or Sortable List], there are five lists or cards on the webpage and these are draggable items or lists. Users can easily reorder the items in an underorder list, giving users a visual dimension to particular actions and modifications. If you’re feeling difficulty understanding what I am saying. You can check the source code or preview.
The preview is available here.
HTML Code
<!DOCTYPE html> <html lang="en"> <!-- --------------------- Created By InCoder --------------------- --> <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>Drag & drop or sortable List - InCoder</title> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> </head> <body> <div class="container"> <div class="title"> <h3>Drag & drop or sortable List</h3> </div> <div class="items"> <div class="item"> <p>Dragable Item 1</p> <span class="moveHand"><i class="fa-solid fa-grip-lines"></i></span> </div> <div class="item"> <p>Dragable Item 2</p> <span class="moveHand"><i class="fa-solid fa-grip-lines"></i></span> </div> <div class="item"> <p>Dragable Item 3</p> <span class="moveHand"><i class="fa-solid fa-grip-lines"></i></span> </div> <div class="item"> <p>Dragable Item 4</p> <span class="moveHand"><i class="fa-solid fa-grip-lines"></i></span> </div> <div class="item"> <p>Dragable Item 5</p> <span class="moveHand"><i class="fa-solid fa-grip-lines"></i></span> </div> <div class="item"> <p>Dragable Item 6</p> <span class="moveHand"><i class="fa-solid fa-grip-lines"></i></span> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script> <script> let items = document.querySelector('.items') new Sortable(items, { animation: 200, handle: '.moveHand', ghostClass: 'drag' }); </script> </body> </html> CSS Code
/* --------------------- Created By InCoder --------------------- */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; height: 100vh; align-items: center; justify-content: center; background-color: #1c015e; } .container{ padding: .5rem 1rem; border-radius: .5rem; background-color: #fff; width: clamp(20rem, 4vw, 25rem); } .container .title { text-align: center; margin-bottom: .5rem; } .container .item { display: flex; color: #fff; margin: .3rem 0; align-items: center; border-radius: .3rem; padding: .5rem .5rem; background-color: #1c015e; justify-content: space-between; } .container .item span { width: 2rem; height: 2rem; cursor: move; display: grid; place-items: center; } .container .item span:hover, .container .item.drag { background-color: #2e0e7c; } 
Top comments (0)