HTML5 comes with a well-stocked API that provides us with various functionalities as standard, thanks to which we can develop more complex and attractive web applications.
In this tutorial you will be able to learn how to use this fabulous API to create drag and drop features on the web with Drag&Drop.
Content
- Introduction to HTML5 Drag and Drop
- Drag and Drop events for javascript
- How to create HTML5 draggable elements
- ondragstart, the first drag and drop event
- How to save information in the drag event (Drag)
- Allow to drop from one element on another
- Working with the dropped element with the ondrop event
- How to retrieve data stored in Drag & Drop events
- How to use Drag and Drop. final review
Introduction to HTML5 Drag and Drop
As I said before drag and drop is a standard in HTML5. This means that any element can be dragged, or rather, made into a draggable element.
Everything goes through a concept as simple as the following: every html element that we want to allow dragging must have the property draggable with the value true.
<img draggable="true" src="imagen.jpg" />
When we activate this property, the element in question will be able to activate the different events available from this Drag and Drop API. Being the first of them ondragstart.
Drag and Drop events for javascript
We will develop our functionalities of drag and drop dealing with functions the different events of the API.
The events that we will need for a basic implementation where we drag one HTML element to another will be:
- ondragstart: this event will be cast and dealt with on the element being draggedthat is, it will always be accompanied by the attribute dredgeable. When a user begins to drag the element (drag) this event will execute its associated javascript, usually a function.
- ondragover: event that will be fired when a user “oversteps” an HTML element while dragging another that is draggable. The normal thing is that we use it in those elements on which dragged elements can be dropped.
- ondrop: event that will be executed on the element on which another element is dropped. We will use this event in the “target” elements of a Drag&Drop.
How to create HTML5 draggable elements
To create your draggable elements of Drag and Drop you only need to add an attribute to the desired element: draggable
the attribute draggable must have the value true to make the element draggable.
As in HTML5 any element can be draggable (draggable), any HTML tag can have the draggable attribute
A draggable image could be the following:
<img src="imagen/prueba.png" draggable="true" width="100" height="100" />
As in HTML5 any element can be draggable (draggable), any HTML tag may have the attribute draggable.
ondragstart, the first drag and drop event
The first event you should take into account when you start working with Drag&Drop is ondragstart. The event ondragstart will be fired whenever a user starts dragging a draggable HTML element (draggable=”true”).
In this event you will have to, for example, save information about the dragged element, its id or specific attribute, or whatever you can think of that you will need for when the user performs the final action; usually a drops.
How to save information in the drag event (Drag)
It is very probable that when you develop with drag and drop you need to store information related to the dragged object. The javascript event ondragstart of drag and drop It has mechanisms for it.
Specifically, we can store data with event.dataTransfer.setData(‘var_name’, value).
A basic function that stores the id of the HTML tag would be:
function alArrastrar( event ) {
event.dataTransfer.setData('id_arrastrado', event.target.id);
}
with the method setData() you can store as much data as you needsuch as if you intend to allow elements to be dropped onto another.
Now that you have your finished draggable element, you have to see how to allow this element to be dropped on another concrete one.
Allow to drop from one element on another
By default, in HTML5, you are not allowed to drop HTML elements, even though they are draggable, onto other elements. To allow to drop (make drops) on the desired HTML element, you must trigger the functionality with the event ondragover.
To activate the drops on an element you have to disable the default behavior of HTML5 with a code similar to the following:
In the HTML element:
<div class="objetivo-drop" ondragover="activarSoltar(event)" >lt;/div>
The function activateRelease will disable the default behavior:
function activarDrop(event){
event.preventDefault();
}
In this function we disable the behavior of the event (event) with the method preventDefault() (prevent default behavior. With this simple code we can now drag elements over our container.
To confirm that you have implemented the solution correctly you can test it and notice that the mouse icon changes when you drag an item over the container.
Working with the dropped element with the ondrop event
We’re almost done. Finally, we are going to assign a function javascript for the event ondrop() which is executed when an element is dropped onto the target element.
Modifying the activated container to drop elements on it:
<div class="objetivo-drop" ondragover="activarSoltar(event)" ondrop="alSoltar(this, event)" ></div>
The function code onRelease You just have to look at which element was dragged and dropped and perform the behavior that we require. In this specific example I am going to show you how I insert the complete HTML element inside the div.
How to retrieve data stored in Drag & Drop events
To recover the stored data you will have to work, once again, with the object event.
function alSoltar(objetoContainer, event){
var idArrastrado = event.dataTransfer.getData('id_arrastrado');
objetoContainer.innerHTML = document.getElementById(idArrastrado).outerHTML;
}
with the method getData() we recover the variables created previously with setData(), while with the attribute innerHTML we assign content to the interior of the tag. In this case I insert the HTML of the element with the id that I kept in dragged_id.
How to use Drag and Drop. final review
If you have followed this tutorial from beginning to end, you will have managed to create a basic functionality of dragging and dropping elements, inserting them (the draggable ones) into others (the ones with the event ondrop).
The steps we have seen could be summarized as follows:
- We activate the draggable elements by adding the attribute draggable and putting the value true.
- We activate the “container” elements by modifying the behavior of the event ondragover with the method event.preventDefault().
- We keep information in the event ondragstart() with the setData() method of the object event.dataTransfer: event.dataTransfer.setData(‘variable_name’, value);
- We recover the information saved in the event ondrop() to work with the information. For this we use the method getData() of data Transfer: event.dataTransfer.getData(‘variable_name’);