How to drag In Js
Drag & Drop With Vanilla JS
0:00 / 0:00
Quality:
Sharing buttons:
[Music]
what's going on guys in this tutorial
we're going to look at JavaScript drag
and drop events and we're going to
create this little application here with
some HTML CSS JavaScript and we're going
to be able to grab an image and you'll
see when I hover over any of these boxes
that it gets darker and it gets a
different kind of border and I can drop
it in okay so we can move it into any of
these boxes now obviously this by itself
is not really a full application but I'm
going to show you how to implement this
kind of UI so you could you know use it
in a game or anything where you'd want
this kind of effect all right so let's
go ahead and get started I'm gonna open
up vs code and I have my file structure
already complete basically it's just an
index.html file
it's a jjs and CSS folder the j/s has a
main J's file the CSS has a style dot
CSS file alright so they're all empty if
you're following along just go ahead and
create those files so in the index.html
I'm just going to use Emmet I'm gonna
say exclamation tab that will give me
kind of a boilerplate and then we're
gonna just give a title of drag and drop
and let's make sure we bring in our CSS
so we'll put a link tag here to CSS
slash style.css and before I forget
let's add the JavaScript so script
source is going to be in the J's folder
and then main dot J s all right now the
HTML for this is going to be very simple
let's actually just go back to the app
real quick so each box here is going to
have a class it's going to div with the
class of empty and then the one that is
actually filled is gonna have a it's
gonna be a div with the class of fill
inside of that empty ok so that's what
we want to do and then through our
JavaScript we'll add drag events for
when we pick it up that'll be the drag
start we have drag over drop and some
other ones as well so we'll be taking a
look at that all right now for this
let's create I will say dot so class of
empty and I'm using Emmet so I
say dot empty for div with the class of
empty and I'm gonna say times five and
then tab and that'll give me five of
those divs and then the first one is
going to be the only one that has the
fill class or the fill div and we want
to add on to this the html5 property
draggable because we wanted this to be
set to true otherwise we won't be able
to drag it at all so let's save that and
that's it for our HTML so next we'll
move on to the style.css and i'm just
going to add a background color to the
body I'll say background let's do dark
dark salmon and that's all I'm going to
do with the body now let's create our
fill class so fill is like I said that's
the one with the image that's the the
filled box so let's say background you
could do it just a color if you want but
I'm doing an image so it's gonna be URL
and I'm using an image from the unsplash
service which just gives you like random
pictures if you want of any size they
have a really good API too so it's gonna
be source dot unsplash.com slash random
and then the size will be 150 times 150
ok so that'll just give us a random
image every time we load the page and
we're going to position this relative so
that we can use top and left and stuff
like that the height of this is going to
be the same as the image so 150 pixels
width same thing and let's add top we
want to move it over 5 pixels and from
the left 5 pixels and let's just set the
cursor to a pointer so that when we
hover over it the cursor actually
changed changes to a pointer so now for
the empty ones for empty we're actually
going to make it display as an inline
block
because we wanted to have block-level
properties but we want it to be you know
lined up not on top of each other and
let's see for the height for the height
and the width we want it to be 10 pixels
bigger than the fill because we want
that spacing otherwise it's going to be
oh it's gonna look weird so let's do
height with both 160 pixels if you use
something different like a hundred here
then you would use like 110 here just
make sure it's ten more all right so now
what we want to do is just add a margin
between each empty box so we'll do 10
make it kind of like a grid and then
let's add a border so it'll be three
pixels let's do salmon and let's do
solid and then the background will say
background color is gonna be white
alright so we can take a look at this
now you can open this with your HTML
file or you if you're using vs code you
can use I'm actually using live server
which is an extension that will open up
my HTML file on my local host so I can
just go to just we need to go to the
HTML and I can click and go to open with
live server and that'll open it up
alright so we have the image here we can
move it but we can't do it it's not
doing anything else if we set draggable
to false we wouldn't be able to do this
so that's why we need that that
attribute so back to the CSS we have a
couple other things to do basically when
we click on it and we we hold down the
mouse and we're dragging it I want to
add a class called hold and for that
class I'm just gonna add a not a
background a border and let's do solid
light gray 4 pixels okay and then also
when we hover over the empty boxes I
want those to have a class of hovered
and with what we wanted to happen here
is change the background from white to a
light gray and then we also want to
change the border style to dashed all
right and then one final class will be
invisible and this is just gonna be
display:none and I'll show you why we
need this in a little bit all right so
that should be good now we can start on
the JavaScript so we have basically two
elements to work with we have the fill
which is the the filled box with the
image and then we have the empties so
let's create variables for those so fill
and we'll set it to document dot query
selector and it has a class of fills so
we want to put in here dot fill all
right and then for the empties there's
multiple empty blocks so I'm actually
going to call this empties or you call
it boxes or whatever you want but I'm
gonna set it to document dot query
selector all because there's multiples
and basically we're gonna grab it and
it's gonna put it into a node list as
opposed to a single element so let's say
empty right here so it'll select all the
empty classes or elements and put them
into a node list inside the empties
variable and we can then loop through it
and stuff like that all right so now
let's add the listeners for our fill so
we'll say fill listeners they cannot
spell so fill dot and then we're gonna
say add event listener in the event
we're gonna listen for here is drag
start okay it should be all lowercase
and then we're gonna call a function
called drag start camel case
okay so let's add one more for fill and
it's gonna be the drag end
no not camel case I made that mistake
I used to make that mistake all the time
then we'll say drag and as the function
all right so let's let's create a
comment here and let's say Phil not Phil
drag functions
okay so we'll have drag start and we
need to add function here so drag start
and let's add function drag and so
basically for drag start all we want to
do when we when we click on it we hold
it and I can actually show you when
these run so we'll say start and let's
go down here and it'll say and sorry
guys shut that off
alright so end and we'll go back to
let's go back to our application and
let's open up our console here and now
I'm gonna I'm gonna click and hold and
move it and you'll see that in the
console we see start and then when I let
go we see n so those are the events that
we're watching for here now when I grab
it and it starts we want to add the hold
class which is this here which gives it
a border a gray border and you don't
have to do this but I just want to kind
of show you guys the different events in
what we can do so let's do this meaning
the the fill element that we grabbed and
we want to call class name or the class
name property ends and we want to append
to it so plus equals and we want to add
a space here and then hold so we're
basically just appending the hold class
all right and then let's see what
happens if we just do that so if I grab
it and I move it notice that it's not
really taking it out of the box it kind
of doubles and that's we don't want that
that's where the invisible
class comes in and we want to use that
but if I were to say this dot class name
and I'm going to use equals which is
going to replace it ok it's going to
just give it the invisible class and
that's it if I were to just do that when
I click it it disappears and we don't
want that what we want is us is a very
minut delay so we're gonna use set
timeout here so we're gonna say set
timeout and set timeout takes in a
function a callback so I'm going to use
an arrow here and then I'm just gonna
grab this and put it here alright and
the second parameter of set timeout is
that is the time but we can actually
just put a zero here just to make it so
that this happens after we actually move
it so let's try that and now you can see
I'm actually pulling it out of the box
okay so that part is actually very
important and then for drag end all
we're gonna do is set the class back to
fill so this dot class name we're not
appending it we're just setting it back
to fill like that so now when I let go
it actually you know it's still there it
doesn't disappear alright and that's
that's pretty much it for the fill
listeners now we want to handle the
empties alright now since this is a node
list and not a single element we're
gonna just loop through so let's say
loop through empties and we'll loop
through the empties and call drag events
so I'm going to use a four of loop here
so we can say for Const and I'm going to
call this empty this is the variable
we'll use within the loop of empties
alright and then for each one we're
gonna say empty dot out event listener
and this event is going to be the drag
over so basically when we drag over the
empty box then we want to call a
function called drag over
like that and then what I'll do is copy
this down four times because we have
four other events this one here is going
to be drag enter so right here I'll say
drag enter and then this one is going to
be drag leave so when we leave the the
box leave and let's see this one here
whoops this one here is going to be drop
just drop but we're going to call the
function that we run drag job like that
okay so now let's go down here and let's
create function drag over which I don't
want to do
getting used to these Mac keyboards so
dragged over actually we'll just copy
this because we need three more
functions like it so one two three and
this one will be drag
let's see drag over a drag enter drag
leave and drag drop okay so let's see if
you wanted to actually we'll just do
this will show you when each of these
run so over and let's just copy that
just doing this real quick just to show
you guys so this will be enter leave and
drop alright so let's go back here and
let's grab it and now notice that when
I'm moving it over is just firing off
when I go into the box it enters and
then leaves okay enter leave enter leave
and to leave and when I drop and
actually you know what drop isn't even
going to run because the the drag over
we actually have to prevent the default
behavior so we can pass in an event
parameter since this was part of an
event listener it's a response or
callback for an event listener and then
we can say e dot prevent default like
that so now if we go back and I let go
now you can see it actually calls drop
okay I know that those this is really
small but it's calling all the events
that it should and all the functions
that it should which is good alright so
let's get rid of these console logs and
I realize that this you know I didn't
have I don't have to do this stuff but I
like you guys to actually understand
what's going on and when these are
firing off rather than just watching me
code and not showing you like what's
going on so drag over is is just that
it's just going to we're just going to
prevent the default now drag enter we
also want to prevent
default at first okay and then what we
want to do is we want to we want to add
the hovered class so this dot class name
and we want to append hovered so space
hovered and that what that'll do is
it'll give it that that dashed border in
that background okay and I'm talking
about the empty blocks boxes and then on
drag leave what we want to happen is we
want to replace hovered we don't want
hovered there anymore so we want it to
be just empty for the class so this dot
class name equals and empty alright now
when we append obviously it just adds to
it so when we enter it's going to be
have the class of empty and hovered but
when we leave it's going to go back to
just empty it's going to get rid of the
hovered because this replaces it okay
this appends to it this replaces it and
then finally for drag drop we want to I
don't know why I'm writing div we want
to set the class name to empty but we
also want to append the fill okay so I
don't mean add a fill class or anything
like that I mean actually take the fill
element which we defined right here and
append it into the empty div okay so if
we look at our HTML we want to be able
to move this around into each of these
and we do that with the append method so
we can say this dot append okay so this
meaning the empty that were clever
dropping in and we want to append the
entire fill element and that should do
it so let's try it so I'll grab this and
now as I hover you'll see that effect
and then when I drop it'll actually drop
in and if we look at our console over
here you'll see right now it's in the
second one the fill but if I go when I
move it here now it's in the third one
but I move it to the N one now it
in the n1 all right so we're essentially
moving it around the Dom which is what
we want and this is all possible because
of these drag events and because of the
html5 draggable property alright so
hopefully that kind of explains drag
drop to you guys obviously this isn't
like a real application but this is
something that you would implement into
the UI of your application if you wanted
to so that's it guys thanks for watching
if you like this video please leave a
like and that's it I will see you next
time thanks
