More drag events and styles are discussed as continue of the previous lesson . . .
While the dragging is continued, ‘ondrag‘ event is called repeatedly for ‘txt’ and, as the result ‘drag’ function is fired. To show its effect we have made a random color changing for ‘drag’ function. It set red, green and blue values randomly and change the ‘tmr’ element color. Hold your mouse on ‘txt’ and move it but do not drop it; you must see the rapid color changes of ‘tmr’.
‘ondragend‘ is fired when the object is dropped. We have changed the message to ‘Dragging is finished.’ in the ‘end’ function.
‘ondragover‘ and ‘ondragenter‘ events are almost the same and they are called when the dragged object comes in to an element area. The first event (‘ondragenter‘) is called again and again but the second one is called once. To show the effect, in the ‘over’ function we re-used color changing process which continue to change while the dragged object is in the ‘drp’ area. A point in ‘enter’ function is the style class changing of the dropping place, to the ‘ent’ class, which is defined in the style part of the page head.
‘ondrop‘ is fired when the dragged object leaved on an HTML element. In its function (‘drop’) we have set that the coming element get added to the current contents of the target ‘div’.
And finally, ‘ondragleave‘ event is called when the mouse with its dragging object leaves the dropping place area. In the ‘leave’ function we have returned the style class of the element to nothing.
Note that ‘ondragstart‘, ‘ondrag‘ and ‘ondragend‘ is called from the dragging element, however, ‘ondragover‘, ‘ondragenter‘, ‘ondrop‘ and ‘ondragleave‘ are for dropping place element.
Now the ‘drag and drop’ most important points are finished. You are able to do a successful drag and drop by HTML5. The following image shows what we have made in the current two posts:
After a sufficient practices follow the next post for learning more about HTML5 . . .