I’m an extreme beginner in html & jscript (<a week), I’m building a basic website acting as an OS, with multiple draggable and closeable windows/divs. My first window is fully functioning, and closes and opens. I’m trying to make my second window draggable and it was working at first but now instead of dragging on click, it shifts down the page.
Html code:
<!-- Add Window 2 -->
<div class="window" id="notes" style="background-color: lightpink; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; width: 500px; height: 400px; border: solid #956E78; border-radius: 20px; margin-top: 95px;">
<div class="windowheader" id="notesheader">
<div class="closebutton" id="notesclose">
</div>
<!-- Add Window 2 -->
<h1 class="headertext"><em>Window 2</em></h1>
<div style="color:white; font-family:Georgia, 'Times New Roman', Times, serif" class="headertext"></div>
</div>
<!-- Add thinigies subtitle -->
<div style="font-family:'Cedarville Cursive'; color: #FFF7FA;">
<center>
<p>Window 2</p>
</center>
</div>
<!-- Close thinigies window -->
</div>
</body>
</html>
Javascript code:
// Make Welcome Div draggable:
dragElement(document.getElementById("welcome"));
// Step 1: Define a function called `dragElement` that makes an HTML element draggable.
function dragElement(element) {
// Step 2: Set up variables to keep track of the element's position.
var initialX = 0;
var initialY = 0;
var currentX = 0;
var currentY = 0;
// Step 3: Check if there is a special header element associated with the draggable element.
if (document.getElementById(element.id + "header")) {
// Step 4: If present, assign the `dragMouseDown` function to the header's `onmousedown` event.
// This allows you to drag the window around by its header.
document.getElementById(element.id + "header").onmousedown = startDragging;
} else {
// Step 5: If not present, assign the function directly to the draggable element's `onmousedown` event.
// This allows you to drag the window by holding down anywhere on the window.
element.onmousedown = startDragging;
}
// Step 6: Define the `startDragging` function to capture the initial mouse position and set up event listeners.
function startDragging(e) {
e = e || window.event;
e.preventDefault();
// Step 7: Get the mouse cursor position at startup.
initialX = e.clientX;
initialY = e.clientY;
// Step 8: Set up event listeners for mouse movement (`elementDrag`) and mouse button release (`closeDragElement`).
document.onmouseup = stopDragging;
document.onmousemove = dragElement;
}
// Step 9: Define the `elementDrag` function to calculate the new position of the element based on mouse movement.
function dragElement(e) {
e = e || window.event;
e.preventDefault();
// Step 10: Calculate the new cursor position.
currentX = initialX - e.clientX;
currentY = initialY - e.clientY;
initialX = e.clientX;
initialY = e.clientY;
// Step 11: Update the element's new position by modifying its `top` and `left` CSS properties.
element.style.top = (element.offsetTop - currentY) + "px";
element.style.left = (element.offsetLeft - currentX) + "px";
}
// Step 12: Define the `stopDragging` function to stop tracking mouse movement by removing the event listeners.
function stopDragging() {
document.onmouseup = null;
document.onmousemove = null;
}
}
document.addEventListener("DOMContentLoaded", function() {
var openButton = document.getElementById("welcomeopen");
var closeButton = document.getElementById("welcomeclose");
var welcomeDiv = document.getElementById("welcome");
// Initially hide the welcome div
welcomeDiv.style.display = "none";
openButton.addEventListener("click", function() {
welcomeDiv.style.display = "block";
});
closeButton.addEventListener("click", function() {
welcomeDiv.style.display = "none";
});
});
document.getElementById("welcomeopen").onclick = function () {
document.getElementById("welcome").style.display = 'block';
}
document.getElementById("welcomeclose").onclick = function () {
document.getElementById("welcome").style.display = 'none';
}
// storing what the blog button is/does code:
var selectedIcon = undefined
function selectIcon(element) {
element.classList.add("selected");
selectedIcon = element
}
function deselectIcon(element) {
element.classList.remove("selected");
selectedIcon = undefined
}
function handleIconTap(element) {
if (element.classList.contains ("selected")) {
deselectIcon(element)
openWindow(window)
} else {
selectIcon(element)
}
}
/* making Window 2 draggable */
dragElement(document.querySelector("#notes"))