How To Build Sortable Drag & Drop With Vanilla Javascript 

the formula is eventually the same, but your explanation is more intuitive. Thanks a lot!

That's because it's needlessly complicated for such a simple problem. just get the element your hovering over using document.elementFromPoint(e.clientX, e.clientY) then check if your mouse is in the upper or lower half of the elements rect. Its the only part of an otherwise good tutorial that just seemed to be there for the sake of looking fancy

@@RobertFletcherOBE I've been doing HTML for 2 years, and its first time I hear about this function :D This makes lots of thing way easier. Thanks!.

@@RobertFletcherOBE i have tried this now, but the problem is when you drag an element and your poinyer is between 2 elements, then it defaults to last in the list, until you go over an element. So it looks kind of bad

@@AndrewTSq this is not HTML though :)

what libaries can you use for drag and drop?

It's necessary to understand what goes on under the hood if you want to know how it works and be able to customize it further.

Nice tutorial, but it can't scale easily

LOL

Haha

This! I'm tired of seeing RU-vid videos where the developer spins up react app to do a simple demo. I'm also using as little library as possible.

i think you can make a column in the db that specify the priority level

This is all very true, and well worth noting. One thing I would say, is that the fact that arrow-functions retain the scope of `this` to be that of the outer scope (rather than the same as the scope of the calling function), is its greatest strength. The old way to get around this was to use the `bind()` function to inform the event callback of what you want `this` to represent within said function. This is a pain in the arse after a while (especially when you're nesting functions within functions, with callbacks and recursion; it quickly becomes a mess of what `this` refers to), and arrow functions were introduced to JavaScript to make everything much clearer (arrow functions also have some awesome shorthand properties, that can make your code much more concise, and therefore quicker to write). This is most noticeable when you're following OO (Object-Oriented) design principles, and have all of these events contained within a class, where you might want to use those instance methods within the event callback, just like you would anywhere else within the class. I think wrapping your head around scopes and sync/async are the two major hurdles when transitioning from beginner JavaScript to intermediate JavaScript, but once you know them inside and out, your programming (both writing/coding and conceptualising) will continue to improve in leaps and bounds!

Just don't use 'this' . e.target or e.currentTarget do the same thing

Thanks for the support! You could 100% do this with the X direction as well to create a grid of elements and it shouldn't be too much more code.

I know what you mean, the drag-and-drop can be applied on todolist app. there are a few examples on codepen, you can check it out !!!

@@maskman4821 will you please share a link?

@@chandansayed8745 the edit feature is not implemented yet because I still am figuring out, stephenlaichaowen.github.io/my-ultimate-todolist/

I was thinking the same. It could be a problem in slower machines. You'd have to most liky throttle the events to have a better performance.

You can just debounce the events being fired so it's more performant on slower machines.

Hello Gothamfury. I am not an expert yet, but I will answer your question with a possible answer. One way to "save" the order would involve for each draggable item to be a post saved in a database; then you would save a custom field value with the order number per each item in the list. Having done this, next time you load the page, you would be able to organize your post data in an array sorted by that custom field, and then append them in the DOM in the correct order. This way would be particularly useful if each draggable item is a piece of "content", like an article. → If someone has observations, or a better solution, pls comment. Thanks!

If it helps, I am writing an Electron/node js app for work. I am not a professional developer and am not alway the best person to remember all this stuff. This example is exactly what I need for my app, so I am going to incorporate it in my code and will look like a pro. Many developers do the same. The find a good algorithm to solve a problem and they use it over and over. Welcome to the club.

So I guess what I'm trying to say is, "stay away from my wife."

I think it will do the “append” case

I'm not Kyle but I can answer: there is no specific reason he used this syntax rather than the other. Both syntaxes are valid and equivalent, he just had to chose one, so he did.

Yeah I need a solution to this. I thought I did something wrong.

setInterval() or setTimeout() - maybe look into debouncing/throttling

Do you give the new draggables their event listeners after adding them?

@@liveyourdreamsdotbe thank you!!

Wow , Best tutorial teacher

@Online Tutorials

Nice tutorials you're doing

Hey Online Tutorials, were you able to make a video tutorial with what you've learned here? As a beginner, I would love to see how other creators are teaching this concept from their own perspectives...

@@codingwithkenny6492 hi kenny!