JavaScript ProjectsSoftware Projects

How To Create Drag & Drop in HTML & JavaScript

Creating a drag-and-drop interface in HTML, CSS, and JavaScript can be achieved by using the HTML5 Drag and Drop API. Here’s a simple example to demonstrate how to create a basic drag-and-drop interface: Drag and Drop is the interaction that can be used to rearrange items within a list, move items from one list to another, or even manipulate the position of elements on a page by using a mouse.

HTML Structure

Create an HTML file with the basic structure for the draggable items and drop targets.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Example</title>
    <link rel="stylesheet" href="styles.css">
    <div class="container">
        <div class="draggable" draggable="true" id="drag1">Drag me!</div>
        <div class="droppable" id="drop1">Drop here</div>
    <script src="scripts.js"></script>

CSS Styling

Create a CSS file (styles.css) to style the draggable items and the drop targets.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;

.container {
    display: flex;
    gap: 20px;

.draggable {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    border-radius: 5px;

.droppable {
    width: 100px;
    height: 100px;
    background-color: #e74c3c;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;

JavaScript Functionality

Create a JavaScript file (scripts.js) to add the drag-and-drop functionality.

// Get the draggable element
const draggable = document.getElementById('drag1');

// Add dragstart event listener
draggable.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text', event.target.id);

// Get the droppable element
const droppable = document.getElementById('drop1');

// Add dragover event listener to allow drop
droppable.addEventListener('dragover', function(event) {

// Add drop event listener
droppable.addEventListener('drop', function(event) {
    const data = event.dataTransfer.getData('text');
    const draggedElement = document.getElementById(data);

How It Works

  1. HTML Structure: The HTML file contains a draggable item and a droppable area.
  2. CSS Styling: The CSS file styles these elements to be visually distinctive.
  3. JavaScript Functionality:
    • dragstart event: Initiated when the user starts dragging an element. The element’s ID is set as the data to be transferred.
    • dragover event: This event is used to allow the drop by preventing the default handling of the element.
    • drop event: This event is triggered when the dragged element is dropped onto the target. The dragged element is then appended to the droppable area.

This example demonstrates the basic functionality of drag-and-drop using HTML, CSS, and JavaScript. You can expand upon this by adding more draggable items, droppable areas, and custom logic to handle more complex drag-and-drop scenarios.

Related Articles

Leave a Reply

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

Back to top button


Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.