Drag and Drop is new in HTML5. This allows the user to click
and hold the mouse button down over an element, drag it to different
location, and release the button to drop the element there.
A semitransparent illustration of what is being dragged can follow the mouse pointer throughout the drag operation. The drop location is also a different application.
A semitransparent illustration of what is being dragged can follow the mouse pointer throughout the drag operation. The drop location is also a different application.
Example:
| <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); }function drag(ev) { ev.dataTransfer.setData(“Text”,ev.target.id); }function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData(“Text”); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body><div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div> <img id=”drag1″ src=”http://fullyhelp.com/html/wp-content/uploads/2013/10/FULLY-HELP.jpg” draggable=”true” ondragstart=”drag(event)” width=”300″ height=”75″ </body> </html> |
Output:
Drag the image into this box:| Events | Description |
|---|---|
| dragstart | It specifies that it fires when the user starts dragging of the object.The user is requesting to drag the element the dragstart event is fired at.During this event a listener would set information such as the drag data and image to be associated with the drag. . |
| dragenter | It defines that fired once the mouse is first moved over an element while a drag is happning. A listener for this event ought to indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default. |
| dragover | It defines this event is fired as the mouse is moved over an element when a drag is occuring. . |
| dragleave | It defines that the event is fired once the mouse leaves an element whereas a drag is occurring. Listeners ought to remove any highlighting or insertion markers used for drop feedback. |
| drop | It defines that the drop event is fired on the element whereever the drop occurred at the end of the drag operation. A listener would be responsible for retrieving the info being dragged and inserting it at the drop location. This event will only fire if a drop is desired. It will not fire if the user cancelled the drag operation. |
No comments:
Post a Comment