added bad drag and drop
This commit is contained in:
parent
305a81508e
commit
e40b97f984
4 changed files with 82 additions and 2 deletions
|
|
@ -13,7 +13,15 @@ body {
|
||||||
#main-window {
|
#main-window {
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
}
|
}
|
||||||
|
@media (pointer:coarse) {
|
||||||
|
body {
|
||||||
|
overflow: scroll !important;
|
||||||
|
}
|
||||||
|
#main-window {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.window-body {
|
.window-body {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
@ -59,3 +67,15 @@ li {
|
||||||
align-items: end;
|
align-items: end;
|
||||||
justify-content: right;
|
justify-content: right;
|
||||||
}
|
}
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
/* no this is not to protect my content or whatever. this is just to make draggable windows work in a non deranged way */
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
56
public/js/drag.js
Normal file
56
public/js/drag.js
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
// wow i love being fake programmer
|
||||||
|
// source: https://jams.hackclub.com/batch/webOS/part-3
|
||||||
|
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.
|
||||||
|
console.log(element.offsetTop);
|
||||||
|
console.log(currentX);
|
||||||
|
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;
|
||||||
|
console.log(element.offsetTop - currentY);
|
||||||
|
console.log(element.offsetLeft - currentX);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -64,3 +64,6 @@ function showCredits() {
|
||||||
document.getElementById("credits").style.display = "block";
|
document.getElementById("credits").style.display = "block";
|
||||||
document.getElementById("credits-button").style.display = "none";
|
document.getElementById("credits-button").style.display = "none";
|
||||||
}
|
}
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
dragElement(document.getElementById("main-window"));
|
||||||
|
});
|
||||||
|
|
@ -18,9 +18,10 @@
|
||||||
<meta property="og:title" content="nin0dev" />
|
<meta property="og:title" content="nin0dev" />
|
||||||
<meta property="og:description" content="Hey, I'm nin0dev, a Canadian software developer." />
|
<meta property="og:description" content="Hey, I'm nin0dev, a Canadian software developer." />
|
||||||
<meta property="og:image" content="https://nin0.dev/logo.png" />
|
<meta property="og:image" content="https://nin0.dev/logo.png" />
|
||||||
|
<script src="js/drag.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="window" id="main-window">
|
<div class="window" id="main-window" style="position: absolute;">
|
||||||
<div class="title-bar">
|
<div class="title-bar">
|
||||||
<div class="title-bar-text">Home</div>
|
<div class="title-bar-text">Home</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue