HTML Drag & Drop

By | February 7, 2020

There is also a drag and drop of HTML specialties. This feature is a power-sailed user interface that users use to copy or delete content or drag files with the help of a mouse. It works on the element of the mouse. If you have to lift any material, then drag it with the help of the mouse, where it is to be placed, it keeps the mouse element. Any element can be dragable.

Browser Support:-

All modern browsers support this feature of HTML.

Example:-

Let us understand this distinction of HTML with an example.


<body>

<div id="myId_1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="myId_2" src="img.gif" draggable="true" ondragstart="drag(event)"
width="300" height="70" />

<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>
</body>

By putting the above example code in your code editor, you can see its result.

Events for Drag and Drop:-

EventDescription
ondragenter Drags the draggable element for the first time.
ondragleaveThe fire occurs when the element is released from the drop
listener using.
ondragstart Fire occurs when a user drags an element.
ondragover Fire on moving an element above the drop listener.
ondrag If any element is used on the ground, it ignites.
ondrop Easy drop of element by user into drop listener.
ondragend Drag and drop is the last episode on completion of the action.
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *