# Drag and Drop a Division Using JavaScript In this guide, we’ll create a simple drag-and-drop functionality using JavaScript. This example allows you to drag a `
` element around the screen with your mouse. # **Step 1: Set Up the HTML** Create an `index.html` file with the following content: ```bash Drag and Drop Example
Drag me!
``` # **Step 2: Create the JavaScript** Create an `app.js` file with the following code to implement the drag-and-drop functionality: ```bash const draggable = document.getElementById('draggable'); let offsetX, offsetY; draggable.addEventListener('mousedown', (e) => { offsetX = e.clientX - draggable.getBoundingClientRect().left; offsetY = e.clientY - draggable.getBoundingClientRect().top; document.addEventListener('mousemove', mouseMoveHandler); document.addEventListener('mouseup', mouseUpHandler); }); function mouseMoveHandler(e) { draggable.style.left = `${e.clientX - offsetX}px`; draggable.style.top = `${e.clientY - offsetY}px`; draggable.style.cursor = 'grabbing'; } function mouseUpHandler() { document.removeEventListener('mousemove', mouseMoveHandler); document.removeEventListener('mouseup', mouseUpHandler); draggable.style.cursor = 'grab'; } ``` # **Step 3: Testing Your Drag-and-Drop Division** 1. Save both `index.html` and `app.js` files in the same directory. 2. Open `index.html` in a web browser. 3. Click and hold the “Drag me!” box, then move it around the screen. # **Conclusion** You’ve successfully created a draggable division using JavaScript! This simple implementation can be expanded further with additional features like boundaries, snapping, or animations. If you have any questions or need further assistance, feel free to ask! Happy coding! [ ](https://medium.com/@nihardankhara75?source=post_page---post_author_info--78fcf5b8f870--------------------------------)