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 developed using HTML, CSS, and JavaScript that enables users to build simple webpage layouts by dragging and dropping different content sections into a canvas area. Users can add elements such as headers, text blocks, images, and buttons, and edit their content directly within the builder. The project demonstrates important frontend concepts such as drag-and-drop functionality, dynamic DOM manipulation, and inline content editing, making it a practical example of a lightweight page builder interface.

Key Features

Drag and drop sections into a layout canvas
Add multiple content blocks such as headers, text, images, and buttons
Edit section content directly within the builder
Rearrange sections dynamically using drag-and-drop
Interactive and user-friendly layout building interface
Responsive design suitable for different screen sizes
Real-time DOM updates using JavaScript

HTML Code

<!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

*{
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

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)

})