How we can create a draggable list using HTML CSS JavaScript? Solution: See this HTML Drag and Drop List With JavaScript, Draggable List With Add Items.
Previously I have shared a to-do list using JavaScript, it is also like that but we can drag and drop list items in this program. This program is an example of how HTML 5 can drag and drop items with JS. We used draggable items in frontend for users and backend also, that help us to place items as our requirement.
Today you will learn to create a Draggable List With Add Items Program, a kind of To-Do list. Basically, this a to-do list type program and you also can shift up and down items with drag and drop. You have to hold the mouse click or touch tap and drop into over other items to shift them. You also can add items in the list by type and click on add icon.
So, Today I am sharing HTML Drag and Drop List With JavaScript. HTML 5 comes with a separate attribute for define the element draggable or not, and with JS we can create a fully functional program for drag and drop. There I have used pure JavaScript, not any library or framework had used. You can use this program on your project, this will be very useful for you.
If you are thinking now how this drag and drop program actually is, then see the preview given below.
Preview Of Draggable List With Add Items
See this video preview to getting an idea of how this to-do list looks like.
Live Demo
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Multiselect Dropdown Checkbox
- JavaScript Custom File Upload Input
- CSS Input Label Animation
- Load More Feature HTML CSS
HTML Drag and Drop List With JavaScript Source Code
Before sharing source code, let’s talk about it. First, I have created a text input with a placeholder and a span for add icon using HTML. After that, I have created a list with a class named and HTML draggable element. Basically, HTML draggable="true" attribute defines the item draggable or not (info), That’s why I have placed this attribute.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. For placing the add icon, I have used + sign and placed inside the span and on hover rotating it by 180 degrees. When you will hover on the list items you will see ‘drag me‘ text on the right side of tab for creating that, I have used CSS :after command and added content.
JavaScript handling the main features of the program, add items like a to-do list and a draggable function. I have fetched elements using the JS document.querySelector command. And created the drag and drop feature using commands: dragstart, drageneter, dragover, dragleave, drop, dragend.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Drag and Drop List | Webdevtrick.com</title> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <h1>DRAG AND DROP</h1> <div class="list"> <input type="text" class="input" placeholder="Add items in your list"/> <span class="add">+</span> </div> <ul> <li class="draggable" draggable="true">HTML</li> <li class="draggable" draggable="true">CSS</li> <li class="draggable" draggable="true">JavaScript</li> <li class="draggable" draggable="true">PHP</li> <li class="draggable" draggable="true">MySQL</li> </ul> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url("https://fonts.googleapis.com/css?family=Raleway:300,800"); body { background-color: #53a8e6; } body h1 { text-align: center; font-family: "Raleway", sans-serif; color: white; font-size: 50px; font-weight: normal; } body .list { position: relative; width: 250px; margin: 0px auto; display: block; } body .list ::-webkit-input-placeholder { color: #cecece; } body .list .input { outline: none; border: 1px solid white; background-color: #53a8e6; color: white; height: 50px; width: 250px; padding-left: 10px; font-family: "Raleway", sans-serif; font-weight: 800; font-size: 16px; margin-left: -5px; } body .list span { position: absolute; right: 0; top: 0; font-size: 30px; font-weight: 800; line-height: 1.8; cursor: pointer; transition: all 200ms; color: white; will-change: transform; } body .list span:hover { transform: rotate(180deg); } body ul { padding: 0px; } body ul .draggable { will-change: transform; font-family: "Raleway", sans-serif; font-weight: 800; height: 50px; list-style-type: none; margin: 10px; background-color: white; color: #212121; width: 250px; line-height: 3.2; padding-left: 10px; cursor: move; transition: all 200ms; user-select: none; margin: 10px auto; position: relative; } body ul .draggable:after { content: 'drag me'; right: 7px; font-size: 10px; position: absolute; cursor: pointer; line-height: 5; transition: all 200ms; transition-timing-function: cubic-bezier(0.48, 0.72, 0.62, 1.5); transform: translateX(120%); opacity: 0; } body ul .draggable:hover:after { opacity: 1; transform: translate(0); } .over { transform: scale(1.1, 1.1); } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
// Code By Webdevtrick ( https://webdevtrick.com ) var btn = document.querySelector('.add'); var remove = document.querySelector('.draggable'); function dragStart(e) { this.style.opacity = '0.4'; dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); }; function dragEnter(e) { this.classList.add('over'); } function dragLeave(e) { e.stopPropagation(); this.classList.remove('over'); } function dragOver(e) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; return false; } function dragDrop(e) { if (dragSrcEl != this) { dragSrcEl.innerHTML = this.innerHTML; this.innerHTML = e.dataTransfer.getData('text/html'); } return false; } function dragEnd(e) { var listItens = document.querySelectorAll('.draggable'); [].forEach.call(listItens, function(item) { item.classList.remove('over'); }); this.style.opacity = '1'; } function addEventsDragAndDrop(el) { el.addEventListener('dragstart', dragStart, false); el.addEventListener('dragenter', dragEnter, false); el.addEventListener('dragover', dragOver, false); el.addEventListener('dragleave', dragLeave, false); el.addEventListener('drop', dragDrop, false); el.addEventListener('dragend', dragEnd, false); } var listItens = document.querySelectorAll('.draggable'); [].forEach.call(listItens, function(item) { addEventsDragAndDrop(item); }); function addNewItem() { var newItem = document.querySelector('.input').value; if (newItem != '') { document.querySelector('.input').value = ''; var li = document.createElement('li'); var attr = document.createAttribute('draggable'); var ul = document.querySelector('ul'); li.className = 'draggable'; attr.value = 'true'; li.setAttributeNode(attr); li.appendChild(document.createTextNode(newItem)); ul.appendChild(li); addEventsDragAndDrop(li); } } btn.addEventListener('click', addNewItem); |
That’s It. Now you have successfully created HTML Drag and Drop List With JavaScript, Draggable List With Add Items. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Thanks!
JS for delete elements ?
Quite new to Javascript as well as CSS, but tried this out and works great, except…. How to actually submit the UL and save the sorted order !?
Am I missing something obvious here….
How to save the result of the new order on submit??
How could you use this with items created dynamically with a JS loop? I’ve tried but keep getting “Cannot read properties of null (reading ‘addEventListener’)” error.