Code to make draggable window inside a window not working

I’m new here and to js could I have an extra set of eyes on my code? Doubled checked it but it doesn’t seem to be working. I was following this tutorial Javascript Tutorial - Draggable Window inside Window - YouTube.

Java Script:

const topbar = document.getElementById(“topbar”);
topbar.addEventListener(“mousedown”, (e) => {
let parentElement = e.target.parentElement;
let parentBox = parentElement.getBoundingBoxRect();
// ^^gives information about the parent box
let prevX = e.clientX;
let prevY = e.clientY;
function mouseMoveHandler(e) {
let movementX = prevX - e.clientX;
let movementY = prevY - e.clientY;
let x = parentBox.left - movementX;
let y = parentBox.top - movementY;
// currently, this goes outside of the bounding box and
// we need to create if statements to stop this
if (x < 0) x = 0;
if (y < 0) y = 0;
if (x > window.innerWidth - parentBox.width)
x = window.innerWidth - parentBox.width;
if (y > window.innerHeight - parentBox.height)
y = window.innerHeight - parentBox.height;
parentElement.style.top = y + “px”;
parentElement.style.left = x + “px”;
}
function mouseUpHandler(e) {
window.removeEventListener(“mouseover”, mouseUpHandler);
}
window.addEventListener(“mousemove”, mouseMoveHandler);
window.addEventListener(“mouseup”, mouseUpHandler);
});

HTML:

Draggable Window
Hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

CSS:

/ CSS Starts Here /
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.window {
width: 400px;
height: 200px;
background-color: burlywood;
border-radius: 20px;
position: absolute;
}
.topbar {
background-color: cornflowerblue;
border-radius: 20px 20px 0 0;
padding: 10px;
cursor: grab;
}
.body {
padding: 20px;
}

Pls I can help you but the code is in my channel but I can’t upload a topic with YouTube link or reply with YouTube link how did you add YouTube link so I can help you

Hi, I figured it out! To add a link I just did ctrl+k!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.