How To Build Sortable Drag & Drop With Vanilla Javascript
- January 1, 2024
- Posted by: MainInstructor
- Category: BASIC Go JavaScript
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1704147645_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: How To Build Sortable Drag & Drop With Vanilla Javascript
Nearly all websites need a little bit of drag-and-drop functionality so in this video I’m going to show you how to build a really simple sortable drag-and-drop system using just HTML CSS and vanilla JavaScript so let’s get started now but before we get started I want to tell you
How you can get an entire year of hosting for free by using today’s video sponsor atlanticnet hosting atlanticnet is giving you an entire year of free hosting on their servers and these are powerful servers that are more powerful than the servers I host my own website
On so if you go to atlanticnet linked in the description below and use the code kyle when you sign up you’re gonna get an entire year of free hosting as well as an additional $50 of credit to use however you see fit so make sure you check that out because
This is a great deal and you’re not gonna find this much free hosting anywhere else welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure
You subscribe to the channel for more videos just like this now on the right I have the final version of the product we’re gonna be building as you can see it’s very simply styled but we can select any element in these lists and we can drag it around and you can see we
Get this nice little ghost image appearing on our cursor as well as an indicator of where the item is going to be placed and then when we release the item it’s going to be put exactly where we want it and we can drag items between any of these containers back up to the
Container and it’s really flexible and the amount of code to create this is actually pretty small so in order to get started I just have an empty project open up and Visual Studio code we’re gonna create an index file called index.html we’re gonna have a style sheet called styles dot CSS just for
These really basic styles and then we’re also going to have a script J’s file for all of our different JavaScript and now in our index.html we just hit exclamation point hit tab or enter it’s going to fill out all of this bully of the plate for us and we can
Come in here and link our style sheet which is called styles.css we can also linked our javascript which is just going to be called script a s and we’re gonna make sure we give this the defer attribute so it loads after our HTML is done now
Inside of our HTML we’re gonna build up an initial container that looks like this where we have one two in the top and three four in the bottom so we’re gonna have a div with the class of container which is going to be this black box so we’re gonna have two of
Those divs and then inside of these divs we’re going to have a bunch of different P tags and these P tags are going to be one two three or four so we’re gonna give them a class of draggable so that we know that these are draggable elements and then in order to make
Something draggable using javascript there’s an attribute called draggable and we just need to set this to true so if we set this draggable attribute to true we’re already partway there into making elements on our page draggable now let’s just put the text of one in here copy
This down and have another one for two and then we’re gonna copy these into our bottom container so that we have a three and a four and we can save that and if we just right-click this and open with live server which is an extension for visual studio code you can download you
Can see we have one two three and four so now in order to style these properly let’s just open up our style sheet and do a few really minor styles so the first thing I want to do is select our body and remove the margin so that we
Can get our black container pushed right up against the side of our screen and then we’re gonna style our container to give it that black style look so we’re gonna say a background color here so background color we’re gonna make this background color three three three it’s
Just gonna give us this nice grayish color as you can see over here and then we want to give it a little bit of padding so we’ll say one rem and we’ll give it a little margin on the top of one REM just to space these black
Containers out from one another and now we can select our different draggable elements and inside of our draggable elements we’re gonna give them a little padding on their own a background color which is going to be white and if we save you can already see that starting
To look good let’s just give them a little bit of a border I’ll say one pixel solid black just to give them a little bit of appearance like that and then lastly to get to this nice little moveable cursor what we can do is just change our cursor over here
To be move and then we hover over any of these we get that nice little movable looking cursor and as you can see already we can drag these elements by just clicking on them and that’s because of that draggable property but it doesn’t matter where we drag them nothing’s gonna happen they’re not
Actually going to move so we’re gonna need JavaScript to set that up so now inside of our script is let’s actually just select the different elements we’re going to need the first thing that we’re gonna need is to get the different elements we can drag all these different
P tags so we can just get an element called draggable x’ which is going to be equal to document query selector of all and we know that these all have a class of draggable so we can just use that draggable class next we’re going to need to get our different containers because
The containers are where we’re able to drop our different elements so when you’re doing drag-and-drop with HTML one’s JavaScript you need to know what your draggable elements are in our case these different P tags and you also need to know where you can drop these elements which are these black
Rectangles in our scenario so we need to get those containers so we can just do another document that query selector all and this one we’re going to get for that dot container class which we already know is going to be these black containers so now once we have those we
Can set up all of our event listeners so let’s do our draggable event listeners first we can say draggable x’ dot for each so that we can loop through each of our draggable x’ and when we loop through each one of these we want to add some event listeners so we can say
Draggable dot add event listener and the first event listener that we want to listen to is what happens as soon as we start dragging our element and this is going to be the drag start event and this gets fired as soon as we start dragging an element and I can prove that
By just saying console dot log dragged start and now if we just inspect this real quick drag this over so we can see our console and if I start to drag this you’re gonna see we get that drag start printed out every time we start to drag
Any of our different P tags so this happens only when we first initially click and start our dragging and it won’t fire again at all until we start a new drag so that’s really useful so with that drag start what we can do is just apply a class to tell us that we
Are currently dragging this element that way we can get this nice little opaque style where we have this element it’s a little bit different color than the rest of the elements so in order to do that let’s just say our draggable all we want to do is we want to come in here
Get our class list we want to add a class and we want to add a class called dragging and then in our Styles we can select any draggable that has that dragging class and we can just change the opacity down to 0.5 and now when we
Start our drag you can see that that opacity changes to 0.5 but when we release our drag it still stays at 0.5 so we need to set up another event listener on our draggable and this event listener is going to be one our drag stops so we can just come in here and
Say drag end which is the same thing as drag start but it calls as soon as we let go of the element and inside of here we want to just remove that class list so we can say class list remove that dragging in class and now when we hover
This you see it gets that nice opaque class and when we release it you can see that class goes away and that’s because these drag start and drag and events so now we have all of that nice stuff for dragging our element around changing the class so it changes its opacity but what
We need to do next is actually be able to move this element around inside the container as well as drop it in other containers so we need to loop through our containers in order to determine how our dragging works for when we’re dropping our element as well as how when
We’re moving our element around so we can just say containers for each container whoops there we go and inside it here we need to listen to an event called drag over so we can say container dot add event listener and this one is dragged over and then we can just run
This function and just just show you what’s happening let’s just console dot log inside of here drag over and again if we inspect our page bring over that console we can see that as soon as we start dragging an element over our container it’s printing out drag over
All the time just repeatedly printing that over and whenever we go outside of our container you see that drag over stops but anytime we’re in a container we get that drag over function being ran so this function is going to be really useful since we can actually determine
Which element we’re over top of as well as if we’re not over an element at all and it’s gonna constantly run every single time we move our mouse so in order to actually take advantage of that what we need to do in here is as you can see over here we’re determining what
Position our element is inside of the container based on our mouse and we’re also determining which element is inside of so if it’s in the second container or this first container so we need to do all of that logic inside of this drag over function the easy way to do this
For now is to ignore all of this sorting and just determine if we’re inside container one or inside container two so in order to do that what we want to do in here is get our dragging element essentially get the element we’re currently dragging and that’s pretty easy to do
We can just say Const draggable which is going to be our current draggable is equal to document diet query selector and we know that only one element will have the dragging class at a given time since is the element we’re currently dragging so that’ll be this draggable element here whichever one we’re
Currently dragging and then all we want to do is append it to whatever container we’re inside of so we can say container dot append child we could just pass in our draggable now when we hover this you see if we’re inside of container one it’s gonna add it to the bottom of
Container one and if we go down to container two it’s gonna add it to the bottom of container two and when we release you can see it stays inside that container same thing with up here and down here the one interesting thing you notice is that our cursor has the do not allow
Simple you see that kind of circle with the line through it in order to remove that what we need to do is inside of our event we actually need to take our event object and we need to just call prevent default because by default dropping inside of an element is disabled so in
Order to enable dropping we need to say a dot prevent default and this is going to change our cursor to have a curse that says we are able to drop inside of here as you can see when we’re outside we get the do not allow cursor and when
We’re inside we get this drop is allowed cursor so now with that taken care of our next step is to determine the order of our elements based on where our mouse position is instead of just determining what container were in we need to figure out which element we’re actually placing
This in between whether it’s in between three and four above three below four inside this container and so on so let’s just create a simple function and inside of this function we’re gonna call it get dry after element and this is going to take in our container as well as the wide
Position of our mouse so what this function is going to do it’s going to determine our mouse position when we’re dragging our element and it’s going to return which ever element our mouse position is directly after so in this case when we’re dragging our one you can
See our mouse is right above number four so this get dragged actor would return this fourth element so we know to insert above number four if our mouse was up here it would return number three since we’re close to two number three and right above it and if we are for some
Reason below all of our elements it would return nothing because it just knows we need to append to the end of our container so let’s actually write out this function and the first thing we need to do is determine all of the elements inside of the container that we are
Currently hovering over which is this container we pass in so we can just come in here and say container dot queries selector all and we want to get all of our draggable elements so we can determine where we’re gonna place this in our list but one problem with this is
When we’re hovering this one over top of this you can see we have elements three and four but also the element we’re dragging number one is also in this container so we want to ignore everything that we’re currently dragging so to do that we can just use the knot
Selector and just say dot dragging which is the current element we’re dragging so this will get every draggable that we’re not currently dragging so essentially if we’re dragging element one it’ll only get element three and four and not the one that we’re dragging and now that we
Have this information we want to convert this to an array so that we can actually do array operations on it because query selector all doesn’t return an array so in order to do that we can just use the spread operator to spread this out into
A new array and with this we can just set this to a variable which we’re just gonna call draggable elements just like that so this is all of our draggable elements inside of our container and now we want to call a function on draggable elements called reduce and what reduce
Is going to do is is essentially going to loop through this element list of dragged ball elements and we’re going to determine which single element is the one that is directly after our mouse cursor based on this y position that we pass in and we can get this Y position
From our event so actually let’s just say const after element up here which is going to be the return of this get drag after element we’re gonna set that equal to calling that function passing in our current container and then the e dot client why this is just going to be the
Y position of our mouse on the screen now this reduce function if you’re not familiar with it I have a video covering it which you can find in the cards in the description down below but essentially this is going to take a function and then it is also going to
Take a second parameter which is essentially the initial value of our reduce so this function is going to take in two parameters the first parameter is going to be the value we’re reducing down to so we’re gonna call this closest because this is going to be the element
That we’re closest to that is directly after our mouse cursor and then the next parameter is going to be each one of these draggable elements we’ll just call this child because each one of them are a child of the container were inside of so for each one of our draggable
Elements this function is going to be called and whatever this function returns is what is this closest section inside of this function and then this second parameter of reduce is just the initial value of closest so what we want to figure out inside of this function is which element is directly after our
Mouse cursor so to keep track of that we need to figure out the offset between our cursor and the element that comes directly after it as well as the element that’s directly after it so initially we just want to have a value which has an offset which is going to be a really
Really large number we want it to be essentially infinitely far away from our mouse cursor or so we’ll say number dot infinite and we can do positive infinity here so number dot positive infinity essentially it’s going to be the largest number possible so every single number
Is going to be smaller than that and this is just so that initially we have a number that is way too large and every single other element in the list is going to be closer than this number not positive infinity now inside of this function we need to determine the actual
Position of the elements on our screen in relation to our mouse so we can get what’s called the bounding box by just calling here child get bounding client rect which is a function and this is going to give us a rectangle for our box and let’s just log this out real quick
So we can console dot log box just to see exactly what’s going on inside of this function and if we come over here inspect our page go to the console and we drag one of these elements you’ll notice nothing’s actually being logged out which means we probably have something
Wrong in our code so if we go over here and check our code we can just see we got draggable elements getting that from our query selector and you notice I forgot to put a period here for our class selector for draggable so when I add that in once again inspect our page
Over our console and if we drag this you now see we’re getting a bunch of things printed out these are the rectangles of our children we have the x position the y position as well as width height and then the top right bottom hand left hand
Position so right and left are going to be x and top and bottom are going to be in Y so for our use case we essentially want to measure from the middle of our box so to do that we can just take the top and we could subtract out half of
The height of our box and that’s going to give us the dead center of our box so let’s start doing that now so we have our box the next thing we want to do is get the offset this is essentially going to be the distance between the center of
Our box and our actual mouse cursor so we can say that our offset here is going to be equal to our Y position which is our mouse Y position and we want to subtract our box top so this is the top of our box and then since we want the
Middle of our box we again need to subtract out our box height and we need to divide that by 2 so half the height of our box will put us in the dead center of each one of our boxes and now if we print out this offset and then just come over here
We’ll inspect our page make sure that we go to our console and then inside of here if we drag number 2 you can see that when we’re above our elements we get negative numbers when we’re below an element we get a positive number which is why we have one positive and one
Negative number and we’ll more below all of our elements you can see every number is positive so essentially when we’re below an element our numbers are positive when we’re above an element our numbers are negative so we only care about offsets that are negative because that means that we’re currently hovering
Above that element so let’s close out of this and we know for a fact we only want to be concerned with offsets that are less than zero essentially we’re above the element that we’re hovering over because if the offset is positive then that means that we’re no longer
Hovering over that element and we are now below that element so now we know we only want offsets that are less than zero but we also want the offset that is the closest to zero because essentially if we’re as close as possible to zero then that means we are barely having our
Cursor above that element so if we were for example hovering our cursor right here we’re barely above element three so we know that this is going to be close to zero and since we’re actually basing this on half right in the dead center here we know if we hover here right
Above the center of element three we know that this is going to be nearly zero so we always want to find the offset that is less than zero but as close to zero as possible so in order to determine which element is our new closest element we can say if our offset
Is less than zero and our offset is greater than our closest dot offset which in our case down here is infinity to start with so if our offset is closer than our closest offset essentially it’s closer to zero then whatever offset we currently have then we know that this is
Going to be our new closest element so we can just come in here and we can return an object which is going to have an offset which is going to be our current offset and it’s also going to have an element oops element which is going to be our child
Which is just the current element that we’re iterating through and one thing to know here is since we always are checking for our offset being greater than our closest offset and our initial closest offset is positive infinity we need this to be negative infinity because we always want to make sure that
This first initial offset is always going to be the smallest number so that way any offset is always initially greater than our default offset so now we can have an else statement instead of here so essentially else if our offset is either greater than zero or it’s not
Larger than the closest offset that we previously had we just want to return our closest that we have for now we can close off that if just like that and let’s make sure that we return this here and now we can just come up here do a
Console dot log of our after element and make sure we return whatever we’re reducing so essentially return this entire reduce function and we should see this after element being whatever our mouse cursor is directly above but to make sure we’re only getting the element here and
The offset and the element as you can see here we’re just gonna return the element that we get from our reduce function down here so now if we save this inspect our elements over here and go to our console you can see that when we hover this element for example when
We’re above r2 you can see that we’re getting our draggable being returned for – as you can see over here and you’re also seeing this offset being printed we just need to remove this log for that offset and now we can go back and inspect this go to our console and let’s
Do another drag here we can see if we dragged our three when it’s above four we get four being printed as our number as you can see we have four right here and if we drag this up here above our one we get one being printed above two
We get two being printed and if we drag it above nothing we get undefined to be imprinted so that we can determine whether or above something for example one or two or four above nothing and we know we need to append to the end of our
List so now what we can do is we can use that inside of this function here to determine where we’re going to put our element so we can say if our after element equals null so exam for example we’re not above anything then we can
Just do what we did before we can append our child to the end of the list and we can just move our draggable up to here so now this will currently work if our after element is not anything so if we drag one and we’re not above anything
It’ll come to the bottom of our list as you can see here once we go below everything it goes to the bottom of our list so that is working the next thing we have to do is to actually determine which element we’re inserting before so
To do that we can just put in an else here and we can say container dot insert before and here we’re going to pass in the new child which in our case is our draggable and then whichever element we’re inserting before which is our after element and now we can save and if
We drag one below – it’ll go below to above – it’ll go above to come down here and above three it’ll be above three same thing with four same thing if it’s below and we’ll we let go it’ll stay in that position so now we can move our
Elements around freely and put them wherever we want inside of our containers and that’s all there is to creating this simple drag-and-drop sortable list if you enjoyed this video make sure to check out my other videos linked over here and subscribe to the channel for more videos just like this
One thank you very much for watching and have a good day
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Kyle you are completely blowing our minds….
Thank you !
That was professional. Very well and clearly explained, Thank you indeed ,
I think the main key of your videos is that you don't make a whole pretty and solid toturial to be copy pasted from, I literally wanted to learn that API's basics and that exactly what I got with a little be more tips like getting the rect info with that clientBounding function
I'm going library-less approach on all of my personal projects as much as possible and wanted to implement this with my own react custom hook for my needs.
Much thanks!!!
My draggable item has a dragger icon for dragging. I dont want that the users are able to drag items on drag entire item, but the icon only.
Is there any approach for this case?
Wow due you figured this out on your own? I wouldn't even know where to start!
it is little confusing tbh
This helped out with my project, thanks so much!
In react please???
Actually , querySelectorAll is array prototype
can anyone explain the math for how it should be done if its horizontal re ordering items
Dragon.
Is it work by touching on phones?
I think things must have changed in the past 3 years. I'm using Chrome and I've quadruple checked to make sure everything I have is typed exactly as you have it, but up to the 10:26 part in the video, it's not working. The entire code for the containers no longer work.
EDIT: I just copied the code directly from your codepen and it doesn't work.
This isn’t working in browser mobile device 😢 Can you please show us how?
This is great, thank you! Have you done something similar but for a TreeView? Like a serious of nested <ul> and <li>? I am working on building now with my base start using your video but thought I would ask if you already did this. Basically I am building a 'favorites' folder structure with drag and drop.
Please dude, I pay for premium, do you really need in video-ads?
Can someone explain how did reduce choose which child to return
And he said SIMPlE 😂😂
You are a literal GOAT
do this in react native, pls
Why those events don't support mobile browser , I run the code, it's fine on the desktop browser but android browser it's not work
can you help please ? I don't want to use any external library . I try to figure out but no vanilla solution 😔
Thank you so much! I've been trying to get my drag and drop to work for hours and this video showed me how.
Perfect.