HTML5 let you use drag and drop feature; so you can let the users to manage their view. They can drag the objects and drop them wherever! For example suppose that you have a blog providing site; you can let the users pull the menus wherever in the page they want. Learn this feature for HTML elements now . . .
You can find the sample in the following link. It has preview there and you can test it online:
Drag and Drop- Change HTML Elements Position in the Page
For doing a successful drag and drop for HTML objects, we need three things:
- An HTML element which can be dragged.
- A special place for dropping the dragged element.
- A code which manages this process and makes relationship between the dragged element and the place.
Let’s create a simple ‘div’ with some extra features as the dragged element:
<div style=”width: 120px; border-style: solid; border-width: thick; height: 20px; text-align: center;”
ID=”txt” draggable=”true” ondragstart=”saveobj(event)”
>SampleText</div>
Three extra attributes are needed to be defined in this ‘div’. First it needs an ID; then we must set that the element can get dragged by ” draggable=”true” ‘; and after that we need to call a function to save the dragged element specifications ‘ ondragstart=”saveobj(event)” ‘. We define ‘saveobj’ function later; now it is essential to know that this function is called when the element have just been started for dragging. Its specifications are sent to the ‘saveobj’ function by ‘event’ argument, which is created automatically by the browsers. By adding these three specifications to any element, we can make it draggable; like the following button:
<button name=”Abutton1″
id=”btn” draggable=”true” ondragstart=”saveobj(event)”
>button</button>
Now it’s time to create a place for dropping element. We are defining it by another ‘div’:
<div style=”height: 113px; border-style: solid; border-width: 1px; padding: 1px 4px; width: 169px;”
ondragover=”allowdrag(event)” ondrop=”addobj(event)”
>Drop Here</div>
‘ ondragover=”allowdrag(event)” ‘ is called when the dragged element comes in to this ‘div’ area, but it is not dropped yet. By default, the objects prevent from any dropping; so we must change it! This job is done by ‘ allowdrag(event) ‘ function (defined later) and the specification of the current ‘div’ is sent again by ‘event’ argument.
Up to know we have three undefined functions: ‘saveobj’, ‘allowdrag’ and ‘addobj’; we define them by some local scripting language like JavaScript:
<head>
<script>
function saveobj(ev){
ev.dataTransfer.setData(“Text”, ev.target.id);
}
function addobj(ev){
var objid=ev.dataTransfer.getData(“Text”)
ev.target.appendChild(document.getElementById(objid));
}
function allowdrag(ev){
ev.preventDefault()
}
</script>
</head>
As you see the code is added to the ‘head’ part of the page; it is not essential but it’s better! What is the process? We want to send the ID of the dragged element by ‘saveobj’ function and receive it in ‘addobj’ function. ‘ev.dataTransfer.setData‘ gives two parameters, type of data to be send and the data. Here we have sent a ‘Text’ data which is the dragged element ID stored in the ‘event’ argument and achived in the function by ‘ev’ (read Java Script Tutorial for more info).
The receiving procedure is done by ‘ev.dataTransfer.getData‘ function. It only gets the type of the data and returned it. We have saved it in ‘objid’ variable. The next step is to add the element to the ‘div’. ‘ev.target.appendChild‘ adds an element to another HTML element, and needs an element as its entry which is the dragged element and can be accessed by ‘document.getElementById‘. It is a function and returns an element by giving its ID.
Finally turn of default prohibition of dropping ‘allowdrag’ function by ‘ev.preventDefault()‘.
That’s it; take it easy! Drag yourself and drop on the next post to learn more!