elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-25 12:28:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

tabs

Browse Source
This commit is contained in:
steveseguin 2023-04-13 02:21:49 -04:00
parent 7e3c2983f3
commit d4adf75895
1 changed files with 70 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
lib.js
View File

@ -2184,91 +2184,92 @@ function makeDraggableElement(element) {
if (session.disableMouseEvents){return;} // this is here for a reason. :P if (session.disableMouseEvents){return;} // this is here for a reason. :P
element.initialX; element.initialX;
element.initialY; element.initialY;
element.currentX; element.currentX;
element.xOffset = 0; element.xOffset = 0;
element.currentY; element.currentY;
element.yOffset = 0; element.yOffset = 0;
element.isDragging = false; element.isDragging = false;
element.dragElement = true; element.dragElement = true;
element.addEventListener('mousedown', dragStart);
element.addEventListener('mousedown', dragStart);
function dragStart(e) { function dragStart(e) {
element.initialX = e.clientX - element.xOffset; element.initialX = e.clientX - element.xOffset;
element.initialY = e.clientY - element.yOffset; element.initialY = e.clientY - element.yOffset;
document.addEventListener('mousemove', drag); document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', dragEnd); document.addEventListener('mouseup', dragEnd);
document.addEventListener('onmouseleave', dragEnd); document.addEventListener('onmouseleave', dragEnd);
document.addEventListener('onmouseenter', dragEnd); document.addEventListener('onmouseenter', dragEnd);
element.isDragging = true;
element.isDragging = true;
} }
function dragEnd(e) { function dragEnd(e) {
element.initialX = element.currentX; element.initialX = element.currentX;
element.initialY = element.currentY; element.initialY = element.currentY;
document.removeEventListener('mousemove', drag); document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', dragEnd); document.removeEventListener('mouseup', dragEnd);
document.removeEventListener('onmouseleave', dragEnd); document.removeEventListener('onmouseleave', dragEnd);
document.removeEventListener('onmouseenter', dragEnd); document.removeEventListener('onmouseenter', dragEnd);
element.isDragging = false; element.isDragging = false;
} }
function drag(e) { function drag(e) {
if (element.isDragging) { if (element.isDragging) {
element.currentX = (e.clientX - element.initialX); element.currentX = (e.clientX - element.initialX);
element.currentY = (e.clientY - element.initialY); element.currentY = (e.clientY - element.initialY);
// Get the dimensions of the viewport // Get the dimensions of the viewport
let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0); let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
// Get the dimensions of the object // Get the dimensions of the object
let elementWidth = element.offsetWidth; let elementWidth = element.offsetWidth;
let elementHeight = element.offsetHeight; let elementHeight = element.offsetHeight;
// console.log('elementWidth:\n',elementWidth) // console.log('elementWidth:\n',elementWidth)
// console.log('elementHeight:\n',elementHeight) // console.log('elementHeight:\n',elementHeight)
// Calculate the boundaries // Calculate the boundaries
let maxX = vw - elementWidth; let maxX = vw - elementWidth;
let maxY = vh - elementHeight; let maxY = vh - elementHeight;
let minX = 0; let minX = 0;
let minY = 0; let minY = 0;
// Calculate real boundaries (parent position: fixed issues) // Calculate real boundaries (parent position: fixed issues)
let topOffset = 0; let topOffset = 0;
let leftOffset = 0; let leftOffset = 0;
let elementOffset = element; let elementOffset = element;
while (elementOffset) { while (elementOffset) {
topOffset += elementOffset.offsetTop; topOffset += elementOffset.offsetTop;
leftOffset += elementOffset.offsetLeft; leftOffset += elementOffset.offsetLeft;
elementOffset = elementOffset.offsetParent; elementOffset = elementOffset.offsetParent;
} }
// Adjust the position if it's going beyond the boundaries // Adjust the position if it's going beyond the boundaries
let realX = element.currentX + leftOffset; let realX = element.currentX + leftOffset;
let realY = element.currentY + topOffset; let realY = element.currentY + topOffset;
if (realX > maxX) { if (realX > maxX) {
element.currentX = maxX - leftOffset; element.currentX = maxX - leftOffset;
} else if (realX < minX) { } else if (realX < minX) {
element.currentX = minX - leftOffset; element.currentX = minX - leftOffset;
} }
if (realY > maxY) { if (realY > maxY) {
element.currentY = maxY - topOffset; element.currentY = maxY - topOffset;
} else if (realY < minY) { } else if (realY < minY) {
element.currentY = minY - topOffset; element.currentY = minY - topOffset;
} }
// Update the position and offset // Update the position and offset
element.xOffset = element.currentX; element.xOffset = element.currentX;
element.yOffset = element.currentY; element.yOffset = element.currentY;
element.style.transform = `translate(${element.currentX}px, ${element.currentY}px)`; element.style.transform = `translate(${element.currentX}px, ${element.currentY}px)`;
} }
} }