DRAG & DROP functionality in a new feature in HTML5 and serves to move items within our website very easily.
Any element of our website can be moved.
DRAG and DROP is performed in 2 steps:
1.- Preparing the HTML element we want to move and specify what to do when you start moving.
2.- Preparing the HTML element where you can drop other things and do when released.
Explanation of step 1
Prepare the HTML element we want to move and specify that you begin to move
In our example, we have a web page with an image that we want to move and a rectangle where we put our image.
Definition of the item you want to move (our image):
Explanation of step 2
Prepare the HTML element where you can drop other things and do when released.
In our example, we have a rectangle "rect1" where we can drop other elements.
This is the definition of our element box below:
Then, so will our website (dragdrop.html)