Web API HTML Drag and Drop

Last Updated : 21 Nov, 2023

In this article, we will learn Web API HTML drag and drop functioning with various methods.

There is the HTML Drag and Drop feature which is used to make user interaction by enabling them to drag some boxes made with any tag and drop them like text and images into the dropping regions that are created on DOM. This can be done by using functionality like Web API HTML Drag and Drop.

Table of Content

Using HTML5 Drag and Drop Events
Using the HTML5 draggable Attribute and DataTransfer

We will explore the above-mentioned approaches with the help of suitable examples.

Using HTML5 Drag and Drop Events

Developed HTML structure and applied the CSS for styling and user-friendly interface.
Activate the drag-and-drop functionality with ‘draggable=true’.
Implement the ‘dragStart(event)’ to retain the dragged element’s data.
Enable the drop with ‘allowDrop(event)‘ for specific targets.
Now at last Validate the drag-and-drop via ‘drop(event)’ for seamless transfer.

Example 1: In this example, we will see how to drag and drop using Events.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css"
          href="style.css"> 
</head> 
  
<body> 
    <div class="main"> 
        <div id="container"> 
            <h1 style="color: green;"> 
                  GeeksforGeeks 
              </h1> 
            <h3>Using HTML5 Drag and Drop Events</h3> 
            <div id="drag-container" 
                 ondrop="drop(event)" 
                 ondragover="allowDrop(event)"> 
                <p>Drop Here</p> 
            </div> 
            <div class="draggable" 
                 id="draggable1" 
                 draggable="true" 
                 ondragstart="drag(event)"> 
                Drag me 1 
            </div> 
            <div class="draggable" 
                 id="draggable2" 
                 draggable="true" 
                 ondragstart="drag(event)"> 
                Drag me 2 
            </div> 
            <div class="draggable" 
                 id="draggable3" 
                 draggable="true" 
                 ondragstart="drag(event)"> 
                Drag me 3 
            </div> 
        </div> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

body { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    background: #ffffff; 
    flex-direction: column; 
    font-family: Arial, Helvetica, sans-serif; 
} 
  
#container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 20px; 
} 
  
#drag-container { 
    width: 300px; 
    height: 150px; 
    border: 2px dashed #3498db; 
    margin: 20px; 
    background-color: #e0e0e0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
  
.draggable { 
    width: 100px; 
    height: 50px; 
    background-color: #3498db; 
    color: #fff; 
    display: flex; 
    text-align: center; 
    align-items: center; 
    justify-content: center; 
    margin: 10px; 
    cursor: pointer; 
} 
  
.main { 
    background-color: #fff; 
    border-radius: 15px; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
    padding: 20px; 
    transition: transform 0.2s; 
    width: 800px; 
} 
  
.main:hover { 
    transform: scale(1.05); 
}

Javascript

function allowDrop(event) { 
    event.preventDefault(); 
} 
function drag(event) { 
    event.dataTransfer.setData("text", event.target.id); 
} 
function drop(event) { 
    event.preventDefault(); 
    const temp = event.dataTransfer.getData("text"); 
    const dragEle = document.getElementById(temp); 
    if (event.target.id === "drag-container" && dragEle) { 
        if (!event.target.contains(dragEle)) { 
            const clone = dragEle.cloneNode(true); 
            event.target.appendChild(clone); 
            dragEle.style.display = "none"; 
        } 
    } else { 
        dragEle.style.display = "block"; 
        document.getElementById("drag-container") 
            .appendChild(dragEle); 
    } 
}

Output:

Output

Using the HTML5 draggable Attribute and DataTransfer

Developed the HTML Structure using basic tags and applied suitable styling.
Enabled elements to be draggable by utilizing the ‘draggable=true’ property.
Utilized the ‘dragStart(event)’ function to store the data of the dragged elements.
Enabled the drop functionality by implementing ‘allowDrop(event)‘ for designated targets.
Utilized the ‘drop(event)’ function to validate the successful execution of drag-and-drop actions.

Example 2: In this example, we will see how to implement drag and drop using the HTML5 draggable Attribute and DataTransfer.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet"
          type="text/css"
          href="index.css"> 
</head> 
  
<body> 
    <div class="main"> 
        <h1>GeeksforGeeks</h1> 
        <h3> 
              Approach 2: Using the HTML5 draggable 
            Attribute and DataTransfer 
          </h3> 
        <div class="droppable" 
             ondrop="drop(event)"
             ondragover="allowDrop(event)"> 
              Drop here 
          </div> 
        <div id="draggable1" 
             class="draggable" 
             draggable="true" 
             ondragstart="dragStart(event)"> 
            Drag Me 1 
        </div> 
        <div id="draggable2" 
             class="draggable" 
             draggable="true" 
             ondragstart="dragStart(event)"> 
            Drag Me 2 
        </div> 
        <div id="draggable3"
             class="draggable" 
             draggable="true" 
             ondragstart="dragStart(event)"> 
            Drag Me 3 
        </div> 
    </div> 
    <script src="index.js"></script> 
</body> 
  
</html>

CSS

.main { 
    background-color: #fff; 
    border-radius: 15px; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
    padding: 20px; 
    transition: transform 0.2s; 
    width: 800px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
} 
  
.main:hover { 
    transform: scale(1.05); 
} 
  
  
body { 
    font-family: Arial, sans-serif; 
    background-color: #f0f0f0; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    margin: 0; 
} 
  
.draggable { 
    width: 200px; 
    padding: 10px; 
    background-color: #f2f2f2; 
    border: 2px solid #ccc; 
    text-align: center; 
    cursor: grab; 
    transition: transform 0.2s; 
    position: relative; 
} 
  
.draggable:active { 
    transform: scale(1.1); 
} 
  
.droppable { 
    width: 300px; 
    min-height: 200px; 
    padding: 10px; 
    background-color: #e0e0e0; 
    border: 2px dashed #999; 
    text-align: center; 
    position: relative; 
} 
  
.draggable, 
.droppable { 
    margin: 10px; 
} 
  
h1 { 
    color: green; 
}

Javascript

function dragStart(event) { 
    event.dataTransfer.setData("text/plain", event.target.id); 
} 
function allowDrop(event) { 
    event.preventDefault(); 
} 
function drop(event) { 
    event.preventDefault(); 
    var temp = event.dataTransfer.getData("text/plain"); 
    var dragEle = document.getElementById(temp); 
    var dropEle = event.target; 
    if (dragEle.classList.contains("draggable") && dropEle.classList.contains("droppable")) { 
        dropEle.appendChild(dragEle); 
    } else if (dragEle.classList.contains("draggable") && dropEle === document.body) { 
        document.body.appendChild(dragEle); 
    } 
} 
var currEle = null; 
document.addEventListener("dragstart", function (e) { 
    currEle = e.target; 
}); 
document.addEventListener("dragover", function (e) { 
    e.preventDefault(); 
}); 
document.addEventListener("drop", function (e) { 
    if (currEle && e.target.classList.contains("draggable")) { 
        var p = currEle.parentNode; 
        var t = e.target; 
        var pInd = Array.from(p.children).indexOf(currEle); 
        var tInd = Array.from(p.children).indexOf(t); 
        if (p === t.parentNode && pInd >= 0 && tInd >= 0) { 
            p.insertBefore(t, currEle); 
            p.insertBefore(currEle, t); 
        } 
    } 
});