Drag and drop is a feature that is used to move objects from one place to another. To move an object in HTML, drag it by holding on the object using left mouse click and move the mouse to the destination where it is to be dropped.
Followings rules are in standard:
- In HTML5, every object is draggable.
- By default, no object is draggable. Thus, we have to make an object draggable by using some JavaScript code.
- For draggable objects, they can only be dropped in allowed positions. Thus, we have to create containers/locations where dropping an object is allowed.
Example:
Here, one HTML element is an empty container and another HTML element is an image. We have to drag the image and drop it in the empty container.
Thus, by basic mouse movement, we can re-allocate the position of HTML elements. This is the power of drag and drop technique.
Note: Dragging an element in a location other than the container allowed for dropping elements is not allowed