How to Drag and Drop API in HTML5?

Hello friends,

You are welcome in this HTML series.

We have learned about API and we got our current location through geolocation API and shown as an output in our system in our last segment.

So, we have seen the background of API in our last segment: What is API, Why do we use API, etc. We are continuing with the same API.

 I hope that you all have tried and run the program yourself of the geolocation API we have learned in the last segment.

Let's move forward towards the current segment.

We will write about API in today's segment but today we will write about drag and drop API.

We have finished geolocation and are now moving to drag and drop API.

Now, what is drag and drop?

So, usually, you must have seen it many times on our web page that we take something from one place like an image and then hold it by clicking it and drag it to another location and release it there.

So, what happens there is When we drag our element (Image) then that image is removed from there and set to another position.

So, we have to enable this drag and drop. When we enable this functionality then it works successfully.

So, today we will look at how we can allow the drag and drop on our webpage through the program.

Let's go to the program.

Let's open an empty program.

Setting this on HTML.

Now, for the Example of Drag and Drop then save. We are giving its name API..Drag and Drop dot html

Let's run this program.

Here our program is running.

So, what do we have to do to run the drag and drop program?

First, we need two points so that we can take our element from one point and put it on another point.

It's better to take an image for execution.

So, we are making an example in which we can drop our image. so one image and division are needed.

So, first I am creating a division under our body.

As I have to enable drag and drop and I need the help of Javascript in this, so for that I am making an ID first and I am giving the division ID as division 1.

Upon this, I have to allow two things which are drag and drop.

Here is an image that I have to drag and drop into this division.

I will use on drag and draggable attribute where I have to allow drag and will use on the drop and over on drag like attribute where I have to allow drop.

The very first attribute which we look at in drag and drop is:

We have taken a div and also I am taking an image. So for the image, I am giving the ID too, "drag1"

So, this is our image which we will drag and this is our div in which we will drop it.

As it is an image, we have a learnvern's image under our folder.

So, that is our image slash learnvern.. and its extension is dot jpg. Let's save this.

Our learnvern's image is shown here.

Now we have to allow drag to this image so that we can allow drag to this image.

For that, the attribute is draggable.

We have to make this draggable attribute true.

This indicates when any element (division, Image, Table) under our webpage has to allow the drag, so that the user can drag this then in that case we make draggable true means allow the draggable attribute by true.

Now when I allow this image to drag then here I have to give two things. The first one is that we have done the draggable true but when my image is dragging then at that moment my "ondragstart" function will execute.

This is the "ondragstart" attribute.

This means when I am starting this or dragging the image by mouse to another point then I can define that method by ondragstart.

Under ondragstart, we write the "allowDrop" name function I am creating.

Every time we work with movement let's say we currently are dragging so this is a movement. We also called this event.

So, while working with the event it's better to pass the opposite of the event.

What happens by passing the event?

For all events which are occurring on our screen, we can pass the reference to our function so that we can pass the proper data to our function.

So, we are making the allowDrop function in ondragstart and we will pass the event that is happening with the function.

Now we are giving the width and height to the image, let's say width=336 and height=70.

Now we have made the image and also allowed it so that it can be dragged.

Now we have to put this image into a division by dragging it.

So, I have to allow the division.

If I have allowed the image "ondrag" then in the same way we will allow "ondrop".

This means one we are allowing drag and another we are allowing drop.

When we are writing the "ondrop" attribute, we will make the function the same as we made it in ondragstart and the name is drop.

So, here as we have passed the event as a reference which event is happening.

In the same way, we will pass the event in the drop so that our drop can execute smoothly.

On drag, we will make the "allowdrag" function and on drop, we will make the "allowdrop" function.

Now, when we have dragged and dropped the image then you can see that here ondragstart is our function and in the same way, where we have to drop the ondrop function is here.

So, we will execute that.

If we have made ondrag then "ondragover" should be a function there.

This means what event is executing at the start and what event is executing at the stop.

Let's say I am alarming on ondrop event because we are allowing the image or content in this div as you can drop it here.

So, for that, I am executing again a function of allowDrop.

So, allowDrop is there in drag and "overdrag".

We are allowing the same function.

So, this is our image and this is our div and this is our save.

Now we have saved.

So, here when we are reloading it then our div is not coming because we have not given any CSS to our division.

In that case, we will add style so that we can see the division clearly.

So, let's say #div is our division.

Under this we are adding width because we have taken 336 widths here so here I am taking nearby width which is 350 which is bigger than our image and the height I am taking is 75 pixels and for proper results, we give padding so that our image remains to shrink inside.

And for the proper visibility of our div, I am giving 1px solid this is our colour.

So, this is our division in which we are going to drop our image.

Here you can see that I am performing drag and drop but it is not performing properly because we only made functions in our code, we have not executed it yet.

We have not written the code of the function.

So, as we will write the code this image that is not working when I am dragging and dropping will work properly.

So, the very first function is allowdrop.

For that, we have to write the script because now we are going to work with javascript.

For writing the script, we will add the script under javascript.

We have made a total of two functions: allowdrop and drop.

Now my first function under script is two make these two functions in this.

What we will do is, we have taken ondragstart and overdrag so let's change the name over here and name as drag so that we can identify that the two functions which we have made are for different things.

This means if I want to drag the image I am naming it as drag and when my drop function is getting over so I have made a drop function, And allow the drop allowdrop function.

We can also give the same name but I am changing it so that I can get different functions for drag and drop.

Total we have to execute three functions over here.

First, one is drag, then drop, and then allowdrop.

So, first let's make our drag function.

So, here I am writing function drag and we have passed the event in drag so will pass its reference that is (e). Means what you have written here that same you can write here or if you have passed the same then you can pass shorthand like e or anything.

The thing which we have to remember is if we have passed any parameter in the function then the parameter should be there where we are defining our function.

So, under our function definition, from where we are calling the function if we have passed any parameter then a minimum 1 function should be in our definition.

And if there are two, then there should be two parameters.

Whether we can give different names but a number of parameters should be necessary.

Here we are making the drag function, then under the drag function when we are starting means we are ready to move then in that case we are allowing the data to drag. So, for this, we will write e dot dataTransfer dot setData "text". What do we have to pass? E dot target dot id.

This line is difficult to understand because we are facing this for the first time.

So, here when we are dragging the data means moving from one place to another.

In that case, what we have done is; First thing is, through the event, we have allowed our data transfer. Now while data transferring if we want to set something like my data is transferring like my image is dragging from its position to division then in that case if I want to show something as I am dragging so, in that case, we will use setData method for what we have to show in place of this.

Whether it's a text and when the text will show? It will show when we pass the reference e.target.id.

This means whatever we are dragging like here we have passed the drag event so its id is drag1.

So this portion (Image) we are targeting.

So, for this, we will write e.target.id. So, this is our drag function.

Now in the same way we have to make the drop function as well.

So, there are two things, drop and allowdrop.

In our first function, firstly I am writing allowdrop. Allowdrop. Under this, I have passed an event so I enable that also.

Now the only thing we have to do is,when we are executing the drop function, then our page should not reload at that time.

To stop reloading any page we have a method e.preventDefault and this is our function.

What e.preventDefault do is? By this our page does not get refreshed.

Because there are chances that our page might get reloaded when we complete the drop.

Hence, to stop that reloading or for the smooth transition, we stop our page & reload when the drop is completed under allowdrop.

Now coming to drop, when we are dropping then function (4 sec pause)and we passed the event so E.

And now the main code under drop is; Now under drop what we will do is the same thing, we have to stop our page from getting reloaded when we are finishing the drop.

When we start the drag then usually the page won't get reloaded but when we drop our image, list, or table or finish our data after drop then in that case, our web page gets reloaded. For stopping that, we have stopped our page from getting reloaded using preventDefault by both drop methods allowdrop and drop.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.