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

@CodingNepal

Жыл бұрын

Glad it helped!

I find a correct solution, but couldn't. Finally, I reach your video and I learned the way how it works. Thank you!!!

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!

Amazing Project I learned a lot.

Pretty cool, you are so creative and productive, good job 👍👍👍

@CodingNepal

Жыл бұрын

Thank you

Always waiting for your javascript videos . Love from india ♥️♥️

@CodingNepal

Жыл бұрын

Hope you enjoyed it!

@ashishpatel6078

Жыл бұрын

@@CodingNepal Ofcourse always 🙂😊

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

Жыл бұрын

@@en_kratia Минин нудный долгий и постоянно через какие то дебри объясняет . Его слушать это пытка

@en_kratia

Жыл бұрын

@@user-qv9jm6rv1l у меня такое же отношение ко всему его контенту (кроме мини-курсов), так что понимаю. Может тебя заинтересует AVIS TV, у него есть плейлист по vue.js и он интересно объясняет.

@user-qv9jm6rv1l

Жыл бұрын

@@en_kratia AVIS TV. Не то . .У CodingNepal есть видео по созданию чата на php mysql js css . И это лучшее из того на чем я учился . Не надо ничего лишнего ставить пакеты хуеты . Тут открыл редактор и погнал писать код . Вот что офигенно. Вот если бы автор сделал бы тот же чат , но используя vue js то цены б ему не было бы

@Alisha__Vlogs

Жыл бұрын

Hello I'm a Software Developer 🤍

Inspiring.

Finally the wait is over 😌❤️.....

@_5ft8inch_

Жыл бұрын

Ok

Great Video

thank you very much

Bro can you create a password protected page for blogger.

@Arjun_chaurasiya

Жыл бұрын

With new animation

@RaniKumari-fq1dn

Жыл бұрын

Please brother create a blogger password protection for post

@ankitanke09

Жыл бұрын

Bro please create a password protection for blogger post

@JY20N

Жыл бұрын

Please bro create a blogger post password protection. With animation

@jyotiaarya-eu2zq

Жыл бұрын

Please brother create

Thank you Sir

thanks a lot.

Os3r

thanks a mill!!! it really helped me :D

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.

Thanks for this video

@CodingNepal

Жыл бұрын

Most welcome

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.

Which screen recorder you use and how do u get blue circle when you click the mouse

wow great ..vid

@shadyether1451

2 ай бұрын

u cant drag a item to the last pos .. can u ?

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.

@snooody

10 ай бұрын

Just do not use e.clientY but e.pageY instead and everything runs fine.

@JX9R

5 ай бұрын

THANK YOU!!@@snooody

Hi, how to me get sortable list, so that it can be stored in db. Thanks.

thanks for the tutorial ❤ , you could try to turn down the music a little bit, it gives headache after 5 min straight😥😥

What is the best way to store this in a DB?

@michelemincone1788

4 ай бұрын

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

@techtips5783

3 ай бұрын

@@michelemincone1788you’re a genius, thanks!!

how to apply this logic if the cards are build dynamically at runtime?

What i have been waiting for...thanks...kindly tell me on which android application can run php without any disturbance

@CodingNepal

Жыл бұрын

I've no idea about any Android application that runs PHP; you can google it.

Hello, is there a way to add a reset button to this, I am trying but getting some errors, any suggestions?

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.

What about a horizontal multi-storey list?

Thank you so much! I subscribed your channel

@CodingNepal

Жыл бұрын

Thanks for subbing!

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

Can you do this with local storage?

What should I do if there is a scroll bar? Can you write an example to support scroll bars?

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.

@CodingNepal

Жыл бұрын

Sure, I'll think on it!

Thank you for this video.. but it doesn't work on iPhone.. do you have a solution?

Drag and drop starts at 5:17

Sir please add voice in your video

Pertama😢

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

@CodingNepal

Жыл бұрын

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

@CodingNepal

Жыл бұрын

I didn't understand what you were trying to say.

@user-xv3gi4uz5z

Жыл бұрын

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

Brother source code haldinu la chado

@CodingNepal

Жыл бұрын

Source code link: www.codingnepalweb.com/drag-and-drop-sortable-list-html-javascript/