• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Drag and Drop

← Previous Next →

The HTML Drag and Drop API lets you make HTML elements draggable and allows users to move them between different locations on a web page. It’s often used for:

  • File uploads

  • Rearranging items

  • Visual editors

This feature uses built-in JavaScript events to control drag behavior.

🔹 How Drag and Drop Works

To make an element draggable, set:

draggable="true"

The 3 Basic Steps:

  1. Drag Start → Fires when you begin dragging

  2. Drag Over → Fires when an item is dragged over a valid target

  3. Drop → Fires when the item is dropped

💻 Example: Simple Drag and Drop

<style>
  #drag1, #box {
    width: 150px; height: 100px; padding: 10px;
    border: 1px solid black; margin: 10px;
  }
  #box {
    background-color: #f0f0f0;
  }
</style>

<p>Drag the element into the box:</p>

<div id="drag1" draggable="true" ondragstart="drag(event)">Drag me</div>
<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here</div>

<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

🔹 Drag and Drop Events

Event Triggered When...
dragstart User starts dragging an element
drag Fires continuously during drag
dragenter Element enters a valid drop target
dragover Element is over a valid drop target
dragleave Element leaves a valid drop target
drop Element is dropped
dragend Drag operation is completed

Practice Questions

Q1. Make a <div> draggable using draggable="true".

Q2. Create a drop zone <div> that accepts dragged content.

Q3. Use ondragstart to store data in dataTransfer.

Q4. Prevent default behavior using ondragover.

Q5. Append the dragged element to the new parent on drop.

Q6. Add CSS styling to highlight the drop area on dragenter.

Q7. Use dragend to reset the dragged element’s style.

Q8. Make a list of images that can be dragged into a gallery area.

Q9. Create two containers to drag items between them.

Q10. Allow only specific elements to be dropped using dataTransfer checks.

HTML Drag and Drop Quiz

Q1: Which attribute enables an HTML element to be draggable?

A. dragable="true"
B. movable="yes"
C. draggable="true"
D. drag="enable"

Q2: Which event occurs when you start dragging an element?

A. dragbegin
B. ondrop
C. dragstart
D. onstart

Q3: What is the purpose of ev.preventDefault() in ondragover?

A. Enables the drop operation
B. Stops dragging
C. Hides the element
D. Deletes the item

Q4: Which method is used to set data for dragging?

A. setDragData()
B. transferData()
C. dataTransfer.setData()
D. dragData()

Q5: Which method is used to get data during drop?

A. dragData()
B. dataTransfer.getData()
C. getDragData()
D. draggedData()

Q6: Which event fires when the dragged item is dropped?

A. dragfinish
B. dragdrop
C. drop
D. dragend

Q7: What does ondragover do?

A. Specifies where dragging starts
B. Lets the element receive the drop
C. Removes the dragged element
D. Starts dragging

Q8: Can any HTML element be made draggable?

A. No
B. Only <img> and <div>
C. Yes, with draggable="true"
D. Only inside forms

Q9: What’s the role of ondrop event?

A. Ends dragging
B. Appends the dragged data to drop zone
C. Sets drag effect
D. Prevents dragging

Q10: Which object provides drag and drop data transfer?

A. dragEvent
B. event.transferData
C. event.dataTransfer
D. document.transfer
← Previous Next →
Login
Go Back Top