Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Create a draggable paragraph in HTML5
The draggable attribute in HTML5 allows you to make elements draggable by the user. When set to true, elements can be dragged and dropped using mouse interactions. This feature is commonly used for creating interactive user interfaces, sortable lists, and drag-and-drop file uploads.
Syntax
Following is the syntax for the draggable attribute −
<element draggable="value">Content</element>
The draggable attribute accepts the following values −
- true − The element can be dragged
- false − The element cannot be dragged
- auto − Uses the browser's default behavior
Basic Draggable Paragraph
To create a simple draggable paragraph, add the draggable="true" attribute to any HTML element. However, making an element draggable is only the first step. To create a complete drag-and-drop experience, you need to handle drag events with JavaScript.
Example
Following example demonstrates a basic draggable paragraph −
<!DOCTYPE html>
<html>
<head>
<title>Basic Draggable Paragraph</title>
<style>
.draggable-text {
background-color: #f0f8ff;
border: 2px dashed #4682b4;
padding: 15px;
margin: 10px;
cursor: move;
display: inline-block;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Draggable Paragraph Example</h2>
<p class="draggable-text" draggable="true">
This paragraph is draggable! Click and drag to move it.
</p>
<p>Try dragging the paragraph above. You can select and move it around the page.</p>
</body>
</html>
The paragraph can be selected and dragged, though it will return to its original position without drop zone handling −
Draggable Paragraph Example [This paragraph is draggable! Click and drag to move it.] (blue dashed border, movable cursor) Try dragging the paragraph above. You can select and move it around the page.
Complete Drag and Drop Implementation
For a functional drag-and-drop system, you need to handle multiple events: dragstart, dragover, and drop. The dataTransfer object stores data during the drag operation.
Example
Following example shows a complete drag-and-drop implementation with two drop zones −
<!DOCTYPE html>
<html>
<head>
<title>Draggable Paragraph with Drop Zones</title>
<style>
.drag-container {
float: left;
width: 200px;
height: 150px;
border: 2px dashed #876587;
margin: 15px;
padding: 10px;
background-color: #f9f9f9;
}
.draggable-paragraph {
background-color: #e6f3ff;
border: 1px solid #0066cc;
padding: 10px;
margin: 5px;
cursor: move;
border-radius: 5px;
}
#status {
margin: 20px 0;
font-weight: bold;
color: #333;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Drag and Drop Paragraph</h2>
<div class="drag-container" ondrop="drop(event)" ondragover="allowDrop(event)">
<p class="draggable-paragraph" draggable="true" ondragstart="dragStart(event)"
id="draggable-text">Drag this paragraph to the other box!</p>
</div>
<div class="drag-container" ondrop="drop(event)" ondragover="allowDrop(event)">
<p>Drop zone - drag the paragraph here</p>
</div>
<div style="clear: both;"></div>
<div id="status">Ready to drag...</div>
<script>
function dragStart(event) {
event.dataTransfer.setData("text/plain", event.target.id);
document.getElementById("status").innerHTML = "Dragging paragraph...";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
var draggedElement = document.getElementById(data);
event.target.appendChild(draggedElement);
document.getElementById("status").innerHTML = "Paragraph dropped successfully!";
}
</script>
</body>
</html>
The paragraph can be dragged between the two containers, and the status message updates to show the current action −
Drag and Drop Paragraph [Container 1 with draggable paragraph] [Empty Container 2] Ready to drag... (Paragraph can be moved between containers with visual feedback)
Drag Events Explained
The drag-and-drop functionality relies on several JavaScript events −
| Event | Description | Triggered On |
|---|---|---|
dragstart |
Fired when dragging begins | Draggable element |
drag |
Fired continuously while dragging | Draggable element |
dragover |
Fired when dragged element is over a drop target | Drop target |
drop |
Fired when element is dropped | Drop target |
dragend |
Fired when dragging operation ends | Draggable element |
Multiple Draggable Paragraphs
You can create multiple draggable paragraphs and sort them between different containers.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Draggable Paragraphs</title>
<style>
.container {
width: 250px;
min-height: 200px;
border: 2px solid #333;
margin: 20px;
padding: 15px;
float: left;
background-color: #f5f5f5;
}
.drag-item {
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 10px 0;
cursor: move;
border-radius: 4px;
}
.drag-item:hover {
background-color: #45a049;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Sort Paragraphs Between Lists</h2>
<div class="container" ondrop="drop(event)" ondragover="allowDrop(event)">
<h3>List A</h3>
<p class="drag-item" draggable="true" ondragstart="dragStart(event)" id="item1">Paragraph 1</p>
<p class="drag-item" draggable="true" ondragstart="dragStart(event)" id="item2">Paragraph 2</p>
<p class="drag-item" draggable="true" ondragstart="dragStart(event)" id="item3">Paragraph 3</p>
</div>
<div class="container" ondrop="drop(event)" ondragover="allowDrop(event)">
<h3>List B</h3>
<p style="color: #666;">Drag paragraphs here</p>
</div>
<script>
function dragStart(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
var draggedElement = document.getElementById(data);
// Only append to container, not to other paragraphs
if (event.target.classList.contains('container')) {
event.target.appendChild(draggedElement);
}
}
</script>
</body>
</html>
Multiple paragraphs can be dragged between the two lists, allowing for dynamic reorganization −
Sort Paragraphs Between Lists [List A: Paragraph 1, Paragraph 2, Paragraph 3] [List B: Drag paragraphs here] (Green paragraphs can be moved between lists)
Browser Compatibility
The HTML5 drag-and-drop API is supported by all modern browsers including Chrome, Firefox, Safari, and Edge. However, mobile browser support is limited, and touch-based dragging requires additional JavaScript libraries or custom touch event handling.
Conclusion
The draggable="true" attribute makes HTML elements draggable, but complete drag-and-drop functionality requires JavaScript event handlers for dragstart, dragover, and drop. The dataTransfer object is essential for passing data between the dragged element and drop target, enabling dynamic and interactive web applications.
539 Views
