Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Drag and Drop Images using HTML5 ?

  • Last Updated : 22 Oct, 2021

In this article, we will see how to create a drag and drop functionality using HTML5. 




        How to Drag and Drop Images using HTML5 ?
        #div1 {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        Drag the GeeksforGeeks image 
        into the rectangle:
    <div id="div1" ondrop="drop(event)" 
    <img id="drag1" src=
        draggable="true" ondragstart="drag(event)" 
        width="336" height="69">
        function allowDrop(ev) {
        function drag(ev) {
        function drop(ev) {
            var data = ev.dataTransfer.getData("text");


Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!