76 lines
2.7 KiB
Text
76 lines
2.7 KiB
Text
---
|
|
import "7.css/dist/7.css";
|
|
import "../css/style.css";
|
|
|
|
const {tabTitle} = Astro.props;
|
|
---
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<title>{tabTitle}</title>
|
|
</head>
|
|
<body>
|
|
<slot />
|
|
<script>
|
|
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("title-bar")) {
|
|
// 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("title-bar").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", () => {
|
|
document.querySelectorAll(".window").forEach(window => {
|
|
dragElement(window);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|