The ondrop event attribute is used to drag an element or text and drop it into a valid dropable location or target. The drag and drop is the common feature of HTML 5.
Note: By default, the images and links are draggable.
There are different events which are used, and occur before ondrop event.
- Events occur on the draggable target
- Events occur on the drop target:
Events occur on the draggable target: There are three events which are used to drag an element from source location.
|ondragstart||This event is used when the user starts to drag an element.|
|ondrag||The ondrag event is used to dragging an element.|
|ondragend||This event is used to finish the dragging of an element.|
Events occur on the drop of the target: The list of events which are used to drop an element are given below:
|ondragenter||This event is used to dragged an element and enter into the valid drop target.|
|ondragover||This event is used when the dragged element is over the drop location.|
|ondragleave||This event occurs when the dragged element leaves the drop target.|
|ondrop||This event occurs when the dragged element is dropped on the drop target.|
Before Dragging the element:
After drag and drop of element:
Supported Browsers: The browser supported by HTML ondrop Event Attribute are listed below:
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.5
- Safari 6.0
- Opera 12.0