Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML | ondragstart Event Attribute

Improve Article
Save Article
  • Last Updated : 18 Aug, 2022
Improve Article
Save Article

HTML ondragstart Event Attribute is used when the user wants to drag the text or element. It is simply the process in which we press on the desired text to drag and drop them to a different location.


DRAG & DROP process includes many operation:  

  1. Operations used to the draggable target: 
    • ondrag-Used when an element is being dragged
    • ondragstart – Used when the user starts to drag an element
    • ondragend – Used when the user has finished dragging the element
  2. Operations used to the drop target: 
    • ondrop: Used when the dragged element is dropped on the drop target
    • ondragover: Used when the dragged element is over the drop target
    • ondragleave: Used when the dragged element leaves the drop target
    • ondragenter: Used when the dragged element enters the drop target

Example-1: Return when the element dragged and dropped.  


        .droptarget {
            float: CENTRE;
            width: 150px;
            height: 45px;
            margin: 25px;
            padding: 15px;
            border: 2px solid LIGHTGREEN;
<p>Drag the text between the boxes.</p>
    <div class="droptarget"
        <!-- ondragstart script -->
        <p ondragstart="dragStart(event)"
          PRESS & DRAG
    <div class="droptarget"
    <p id="demo"></p>
        function dragStart(event) {
        function dragging(event) {
              "demo").innerHTML = "Dragging";
        function allowDrop(event) {
        function drop(event) {
            var data = 
              "demo").innerHTML = 


Before Drag:  

After Drop: 

Supported Browsers:  

  • Chrome 1.0
  • Edge 12.0
  • Firefox 9.0
  • Safari 3.1
  • Opera 12.0
  • Internet Explorer 9.0

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!