Drag & Drop Website Section Builder

Drag & Drop Website Section Builder with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #33

Project Overview

The Drag & Drop Website Section Builder is an interactive frontend tool built using HTML, CSS, and JavaScript. It allows users to create simple webpage layouts by dragging different content sections from a sidebar and dropping them into a canvas area. Users can add headers, text sections, images, and buttons to build their own page structure.

First, the sidebar provides different draggable content blocks. Next, JavaScript detects which block the user selects and creates the corresponding section inside the canvas. The generated text and button sections can also be edited directly. Therefore, this project demonstrates drag-and-drop functionality, dynamic DOM manipulation, contenteditable, and interactive page-building concepts.

Key Features

Drag and Drop Sections: Users can drag different content blocks from the sidebar and drop them into the layout canvas. This provides a simple way to build a webpage structure interactively.
Multiple Content Blocks: The builder provides Header, Text Section, Image, and Button blocks. Each block creates a different type of content when dropped into the canvas.
Dynamic Section Creation: JavaScript creates a new section whenever a block is dropped. Therefore, users can add multiple sections to the canvas during the same session.
Editable Content: Header, text, and button content can be edited directly inside the builder. The project uses the contenteditable attribute to make these elements editable.
Interactive Canvas: The canvas acts as the main workspace for building the webpage. Users can continuously add new sections to the empty area.
Drag Event Handling: JavaScript uses drag-and-drop events such as dragstart, dragover, and drop. These events control how blocks move from the sidebar into the canvas.
Dynamic DOM Updates: New sections are created with JavaScript and inserted using appendChild(). As a result, the page updates immediately without requiring a refresh.
Image Section Support: The Image block automatically creates an image section using a placeholder image. The image also adjusts to the available width of its section.
Clean Builder Interface: The project uses a sidebar and canvas layout with clear spacing and simple styling. This makes the page-building process easy to understand.
Responsive Layout: The main container uses a flexible width with a maximum width, while the builder uses Flexbox. This allows the interface to adapt to different screen sizes.

What You'll Learn

How to create a drag-and-drop interface using HTML
How the HTML5 Drag and Drop API works
How to use dragstart, dragover, and drop events
How to store and retrieve data with dataTransfer
How to create elements dynamically with JavaScript
How to use contenteditable for inline editing
How to insert dynamic content using appendChild()
How to build a simple webpage layout builder

HTML Code

The HTML creates the basic structure of the website section builder. First, it adds a main container with the project heading and a .builder area containing two sections. The sidebar contains four draggable blocks: Header, Text Section, Image, and Button. Each block uses the draggable="true" attribute and a data-type value so JavaScript can identify which type of section the user selected.

Next, the canvas contains a placeholder message that tells users where to drop sections. JavaScript later adds the generated content inside this canvas.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drag & Drop Website Section Builder</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

<h1>Drag & Drop Website Section Builder</h1>

<div class="builder">

<div class="sidebar">

<h3>Sections</h3>

<div class="block" draggable="true" data-type="header">Header</div>
<div class="block" draggable="true" data-type="text">Text Section</div>
<div class="block" draggable="true" data-type="image">Image</div>
<div class="block" draggable="true" data-type="button">Button</div>

</div>

<div class="canvas" id="canvas">

<p class="placeholder">Drop sections here</p>

</div>

</div>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

The CSS creates a clean builder interface with a dark blue page background and a centered white container. The main container uses padding, rounded corners, a maximum width, and a shadow to create a card-style layout. Next, the .builder uses Flexbox to place the sidebar next to the canvas. The sidebar contains blue draggable blocks, while the canvas uses a dashed border to clearly show the area where users can drop sections.

Finally, the .section class styles each dynamically created block with padding, spacing, a light background, rounded corners, and a border. This keeps every added section visually organized.

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
padding:40px;
display:flex;
justify-content:center;
}

.container{
background:white;
padding:30px;
border-radius:12px;
width:900px;
max-width:95%;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

h1{
text-align:center;
margin-bottom:25px;
}

.builder{
display:flex;
gap:20px;
}

.sidebar{
width:200px;
background:#f1f5f9;
padding:15px;
border-radius:8px;
}

.sidebar h3{
margin-bottom:10px;
}

.block{
background:#2563eb;
color:white;
padding:10px;
border-radius:6px;
margin-bottom:10px;
cursor:grab;
text-align:center;
}

.canvas{
flex:1;
border:2px dashed #ccc;
padding:20px;
min-height:300px;
border-radius:8px;
}

.placeholder{
color:#999;
text-align:center;
}

.section{
background:#f9fafb;
padding:15px;
margin-bottom:10px;
border-radius:6px;
border:1px solid #ddd;
}

Javascript Code

JavaScript controls the drag-and-drop functionality and dynamic section creation. First, the code selects all .block elements and adds a dragstart event listener to each one. When dragging starts, the block’s data-type value is stored using dataTransfer. Next, the canvas listens for the dragover event and uses preventDefault() to allow dropping. When a block is dropped, JavaScript retrieves its type and creates a new div with the .section class.

After that, the code checks the selected type and generates the matching content. Header and text sections use contenteditable="true", while the image section creates an image and the button section creates an editable button. Finally, appendChild() adds the new section to the canvas, allowing users to continue building their layout.

const blocks = document.querySelectorAll(".block")
const canvas = document.getElementById("canvas")

blocks.forEach(block => {

block.addEventListener("dragstart", e => {

e.dataTransfer.setData("type", block.dataset.type)

})

})

canvas.addEventListener("dragover", e => {
e.preventDefault()
})

canvas.addEventListener("drop", e => {

e.preventDefault()

const type = e.dataTransfer.getData("type")

const section = document.createElement("div")
section.className = "section"

if(type === "header"){
section.innerHTML = `
<h2 contenteditable="true">Editable Header</h2>
`
}

if(type === "text"){
section.innerHTML = `
<p contenteditable="true">Click here to edit this text section.</p>
`
}

if(type === "image"){
section.innerHTML = `
<img src="https://picsum.photos/600/200" style="width:100%;border-radius:6px;">
`
}

if(type === "button"){
section.innerHTML = `
<button contenteditable="true" style="padding:10px 15px;background:#2563eb;color:white;border:none;border-radius:6px;">
Editable Button
</button>
`
}

canvas.appendChild(section)

})