PatrickOrg/ULTIMATE-JAVASCRIPT-PROJECT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Complete Drag and Drop Interface project

Browse Source
This commit is contained in:
Deepak Kumar
2024-06-12 21:09:52 +05:30
parent 1be3ab1fa7
commit 9f32d77113
4 changed files with 156 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
Miscellaneous Projects/8-drag_and_drop_interface/README.md
View File

@@ -2,20 +2,83 @@
## Description
A brief description of the drag and drop interface project.
The Drag and Drop Interface project is designed to provide a user-friendly way to move elements within a web page. This interface can be used in various applications, such as rearranging items in a list, organizing a dashboard, or creating an interactive UI for users. It leverages the power of JavaScript to enable drag-and-drop functionality, ensuring a smooth and intuitive user experience.
## Features
- Feature 1
- Feature 2
- Feature 3
- **Feature 1: Intuitive Drag and Drop**
- Users can easily click and drag elements to reposition them on the page.
- **Feature 2: Dynamic Rearrangement**
- Elements can be dynamically rearranged, providing real-time feedback and visual cues to the user.
- **Feature 3: Customizable**
- The interface is highly customizable, allowing developers to tweak styles and behaviors to fit their specific needs.
## Technologies Used
- JavaScript
- HTML
- CSS
- **JavaScript**
- Core logic for handling drag-and-drop events.
- **HTML**
- Structural markup for the draggable elements and containers.
- **CSS**
- Styling to enhance the visual appearance and interactivity of the draggable elements.
## Setup
Instructions to set up and run the project.
Follow these instructions to set up and run the project locally:
1. **Clone the Repository**
```bash
git clone https://github.com/deepakkumar55/ULTIMATE-JAVASCRIPT-PROJECT.git
cd Miscellaneous Projects/8-drag_and_drop_interface
```
2. **Open the Project**
- Open the `index.html` file in your preferred web browser.
3. **Edit and Customize**
- Modify the HTML, CSS, and JavaScript files to customize the drag-and-drop functionality to your needs.
## Contribute
We welcome contributions from the community! Here's how you can help:
1. **Fork the Repository**
- Click on the "Fork" button at the top right of the repository page to create a copy under your GitHub account.
2. **Create a New Branch**
```bash
git checkout -b feature/your-feature-name
```
3. **Make Your Changes**
- Implement your feature or bug fix.
- Ensure your code follows the project's style guidelines.
4. **Commit Your Changes**
```bash
git add .
git commit -m "Add your message here"
```
5. **Push to Your Branch**
```bash
git push origin feature/your-feature-name
```
6. **Create a Pull Request**
- Go to the original repository and click on "New Pull Request."
- Provide a clear description of your changes and submit the pull request for review.
## Get in Touch
If you have any questions or need further assistance, feel free to open an issue on GitHub or contact us directly. Your contributions and feedback are highly appreciated!
---
Thank you for your interest in the Drag and Drop Interface project. Together, we can build a more robust and feature-rich application. Happy coding!

18
Miscellaneous Projects/8-drag_and_drop_interface/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Interface</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="draggable" draggable="true">Item 1</div>
<div class="draggable" draggable="true">Item 2</div>
<div class="draggable" draggable="true">Item 3</div>
<div class="draggable" draggable="true">Item 4</div>
</div>
<script src="script.js"></script>
</body>
</html>

39
Miscellaneous Projects/8-drag_and_drop_interface/script.js Normal file
View File

@@ -0,0 +1,39 @@
document.addEventListener('DOMContentLoaded', () => {
const draggables = document.querySelectorAll('.draggable');
const container = document.querySelector('.container');
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', () => {
draggable.classList.add('dragging');
});
draggable.addEventListener('dragend', () => {
draggable.classList.remove('dragging');
});
});
container.addEventListener('dragover', e => {
e.preventDefault();
const afterElement = getDragAfterElement(container, e.clientX);
const dragging = document.querySelector('.dragging');
if (afterElement == null) {
container.appendChild(dragging);
} else {
container.insertBefore(dragging, afterElement);
}
});
function getDragAfterElement(container, x) {
const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = x - box.left - box.width / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
});

28
Miscellaneous Projects/8-drag_and_drop_interface/styles.css Normal file
View File

@@ -0,0 +1,28 @@
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.container {
display: flex;
gap: 10px;
}
.draggable {
padding: 20px;
background-color: #4CAF50;
color: white;
cursor: grab;
border-radius: 5px;
user-select: none;
}
.draggable.dragging {
opacity: 0.5;
cursor: grabbing;
}