Drag and Drop Sortable List in HTML CSs & JavaScript | Draggable List in JavaScript
ฝัง
- เผยแพร่เมื่อ 22 ก.พ. 2023
- In this video tutorial, I'll guide you through the steps to create a Drag and Drop Sortable List using HTML, CSS, and JavaScript. The Sortable List is a useful feature that allows users to drag and reorder items to their desired positions.
Download Images of this Project
drive.google.com/file/d/1fSfa...
Download Codes From Here
www.codingnepalweb.com/drag-a...
Follow me on Instagram
/ coding.np
#javascript #html #css #javascriptprojects #js #javascriptgame
Music Credit:
Ikson - Anywhere [Official]
• #66 Anywhere (Official)
Ikson - We Are Free [Official]
• #83 We Are Free (Offic...
Miss You - LiQWYD
• Miss You - LiQWYD (No ...
Adding the dragging class after a delay is sooo sneaky. Thanks for sharing!
Thank you for making this video. I was searching through the youtube to make grag and drop list only using html and js but wasn't able to find it all were based on react. Your channel have helped me a lot. Thank you
Glad it helped!
I tried this a bit, but ultimately could not get it to correctly position the dragged item where I wanted to drop it in the list. I think it's silly to do the positional calculation when you know you are working with a list of elements like this. You can simply switch your dragover listener to each list item instead of the parent list element (the in this case), and then just do a few if statements in your listener to check where the current event target (the item you are hovering over) sits in the list in relation to the item you are dragging. That information tells you which direction in the list the item is being dragged, at which point you know if you should be inserting it before or after the item you are over. I believe this also stops the listener from firing hundreds of times while you are dragging? All the rest of this is pretty great though, thanks!
I find a correct solution, but couldn't. Finally, I reach your video and I learned the way how it works. Thank you!!!
Amazing Project I learned a lot.
Pretty cool, you are so creative and productive, good job 👍👍👍
Thank you
Always waiting for your javascript videos .
Love from india ♥️♥️
Hope you enjoyed it!
@@CodingNepal Ofcourse always 🙂😊
Which screen recorder you use and how do u get blue circle when you click the mouse
Inspiring.
Great Video
Finally the wait is over 😌❤️.....
Ok
Thank you for you video. Every thing works well except when i will use a scrollable list. In this case the Drag & Drop doesn't work. Can you give me a suggestion on how to manage this situation ? Thanks.
Hello Friend. You are truly the best. You managed to silently teach me what others could not through conversation. You are a very good teacher. I saw a lot of people, they are not the same. But here's what I wanted to say. Nobody programs in regular JS anymore. Maybe you will start teaching new technologies, not very difficult, for example VUE JS (cdn is required, since installing packages scares a lot of people, me too). What do you think?
Владилен Минин настолько все доступно объясняет в мини-курсах, что доступнее уже некуда, нет?
@@en_kratia Минин нудный долгий и постоянно через какие то дебри объясняет . Его слушать это пытка
@@user-qv9jm6rv1l у меня такое же отношение ко всему его контенту (кроме мини-курсов), так что понимаю. Может тебя заинтересует AVIS TV, у него есть плейлист по vue.js и он интересно объясняет.
@@en_kratia AVIS TV. Не то . .У CodingNepal есть видео по созданию чата на php mysql js css . И это лучшее из того на чем я учился . Не надо ничего лишнего ставить пакеты хуеты . Тут открыл редактор и погнал писать код . Вот что офигенно. Вот если бы автор сделал бы тот же чат , но используя vue js то цены б ему не было бы
Hello I'm a Software Developer 🤍
thank you very much
Os3r
Thank you Sir
thanks a mill!!! it really helped me :D
Hello, is there a way to add a reset button to this, I am trying but getting some errors, any suggestions?
Hi, how to me get sortable list, so that it can be stored in db. Thanks.
thanks a lot.
How to create search bar like google?
When we click on search bar it comes in full page view and when we click on back button of my phone it is in normal again.
how to apply this logic if the cards are build dynamically at runtime?
Thanks for this video
Most welcome
Can you do this with local storage?
Thank you very much for that tuto wonderful!
I only have a problem that I can't solve... when I scroll on the page and I try then to order the list, there is a bug.
It doesn't work well and do whatever... :(
If someone has a solution. Thx lot.
What about a horizontal multi-storey list?
Thank you for your video. If the browser length is shorter than the white area, the drag and drop will be shifted by a number of hidden option(s); which makes the codes cannot be used for too many options.
Just do not use e.clientY but e.pageY instead and everything runs fine.
THANK YOU!!@@snooody
I have one doubt any plz clarify.In which type of project we can use this Design.. where gonna we use this design on website example plz
What should I do if there is a scroll bar? Can you write an example to support scroll bars?
Bro can you create a password protected page for blogger.
With new animation
Please brother create a blogger password protection for post
Bro please create a password protection for blogger post
Please bro create a blogger post password protection.
With animation
Please brother create
wow great ..vid
u cant drag a item to the last pos .. can u ?
What i have been waiting for...thanks...kindly tell me on which android application can run php without any disturbance
I've no idea about any Android application that runs PHP; you can google it.
thanks for the tutorial ❤ , you could try to turn down the music a little bit, it gives headache after 5 min straight😥😥
Thank you for this video.. but it doesn't work on iPhone.. do you have a solution?
Is there a chance you could make chapters for html, css and js? It would make watching much easier for people who already know how to style it for example.
Sure, I'll think on it!
Thank you so much! I subscribed your channel
Thanks for subbing!
Pertama😢
does it work in mobile browser. touch screen
What is the best way to store this in a DB?
The best way to do this is using an object in javascript as state for the draggable cards.
Let's start from the DB, so from the backend. Let's say you have a record in a table with a JSON string inside. This JSON is simply a representation of the raw data of the card.
Then from an API endpoint, maybe made in PHP, you get this data and then return it with the ID of the row as reference.
When you make an AJAX call in JS you'll get the JSON string stored in the database.
So you parse the JSON string and then you'll use this as state for your app.
From the parsed JSON you'll get an object in JS, so you have to build the HTML from this to render all the draggable cards and you have to insert into this HTML the ID of the row taken from the DB.
Let's say you have all your drag / drop logic in JS, you have to reflext the drag and drop changes in this JS object (for example the ordering of the elements).
In fact, if you move an element from a position to another you have to reorder the elements inside the object.
After doing this you have to save this object in the database.
You can trigger an AJAX call (UPDATE REQUEST) after the drag ends or when a SAVE button is clicked. Before making the AJAX call stringify your object in JSON format with the method JSON.stringify(yourObject), you have to include the ID of the database row to reference which row to update.
But for this last operation you have to create another API endpoint (in PHP or another server side language) to take the JSON string and save it into the same row of the database where you took the JSON string initially.
In the API for updating / saving the data you have to select the ROW by ID and then inserting the new JSON string.
This is the logic behind persisting the data with an interactive JS web application.
So you must have a logic in the frontend to follow the data changes in your application as the user interacts with the UI.
Then you have to send AJAX requests to an endpoint to save the data.
And you also need an endpoint to get the data when the web page loads.
Everything should follow security (escaping data, sanitizing and validation) and code design best practices like DRY and KISS principles
@@michelemincone1788you’re a genius, thanks!!
Hello Dai I need Help ..! How to Make a link that will redirect to my facebook ID , Personal messenger inbox and will automatically sent message Hi instantly after clicking that link . This is what I need for my Personal Portfolio Webpage. Yes Its very ease to redirect towards my inbox but I am confused in Predetermined automatically sent message . I'm Using HTML CSS JS
Maybe Facebook provides an API for this. You can check it out.
I don't know if there is a way in which we can show double, triple bond in HTML css also double and triple bond above carbon C-C=C-C , C-Cabove it=bond=C-C
I didn't understand what you were trying to say.
Have you seen structural formula of organic Compounds. I need to write them for my website. As I am trying to write content of science subject. I know it can be done by using photos but large number of photos will slow down and there will be large loading time
Sir please add voice in your video
Drag and drop starts at 5:17
Brother source code haldinu la chado
Source code link: www.codingnepalweb.com/drag-and-drop-sortable-list-html-javascript/