Here’s a logic of how you can implement drag and drop functionality in JavaScript using classes:
In this example, we define a Draggable class that handles the drag and drop functionality. Each draggable element is represented by a <div> element with the class name “draggable”. Inside the draggable element, there is a <button> element with the class name “drag-button” which triggers the drag operation.
The Draggable class has a constructor that takes the draggable element as an argument. It sets up an event listener on the drag button’s “mousedown” event to start the drag operation. When the drag button is pressed, the startDrag method is called. It calculates the initial offset of the mouse pointer relative to the draggable element.
During the drag operation, the drag method is called when the mouse is moved. It calculates the new position of the draggable element based on the mouse movement and updates its left and top CSS properties accordingly.
Finally, the stopDrag method is called when the mouse button is released, which removes the event listeners for mouse movement and mouseup events, effectively stopping the drag operation.
The last part of the code initializes draggable elements by selecting all elements with the class name “draggable” and creating a new Draggable instance for each of them.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="draggable" id="draggable1">
<button class="drag-button">Drag</button>
</div>
<div class="draggable" id="draggable2">
<button class="drag-button">Drag</button>
</div>
<div class="draggable" id="draggable3">
<button class="drag-button">Drag</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css:
.container {
width: 400px;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.draggable {
width: 100px;
height: 100px;
background-color: #f1f1f1;
border: 1px solid #ccc;
margin-bottom: 10px;
cursor: move;
}script.js:
class DraggableContainer {
constructor(container) {
this.container = container;
this.container.addEventListener('mousedown', this.handleDragStart.bind(this));
document.addEventListener('mousemove', this.handleDrag.bind(this));
document.addEventListener('mouseup', this.handleDragEnd.bind(this));
this.draggableElements = [];
}
addDraggableElement(element) {
const draggableElement = new Draggable(element);
this.draggableElements.push(draggableElement);
}
handleDragStart(event) {
if (event.target.classList.contains('drag-button')) {
this.draggedElement = event.target.closest('.draggable');
this.offsetX = event.clientX - this.draggedElement.offsetLeft;
this.offsetY = event.clientY - this.draggedElement.offsetTop;
this.draggedElement.style.zIndex = '999';
}
}
handleDrag(event) {
if (this.draggedElement) {
event.preventDefault();
const x = event.clientX || event.pageX - this.offsetX;
const y = event.clientY || event.pageY - this.offsetY;
this.draggedElement.style.left = x + 'px';
this.draggedElement.style.top = y + 'px';
}
}
handleDragEnd() {
if (this.draggedElement) {
this.draggedElement.style.zIndex = 'auto';
this.draggedElement = null;
}
}
}
class Draggable {
constructor(element) {
this.element = element;
}
}
// Initialize draggable container
const container = document.querySelector('.container');
const draggableContainer = new DraggableContainer(container);
// Add draggable elements
const draggableElements = document.querySelectorAll('.draggable');
draggableElements.forEach((element) => {
draggableContainer.addDraggableElement(element);
});
To use this implementation, create three separate files: index.html, styles.css, and script.js. Place the HTML code in the index.html file, the CSS code in the styles.css file, and the JavaScript code in the script.js file. Make sure all three files are in the same directory.
Then, you can open the index.html file in a web browser, and the drag and drop functionality will work as expected.