interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Optimize DragAdv class

Browse source 
- Only use left mouse button
- Handle element and placeholder together
This commit is contained in:
sthag 2025-10-27 23:24:02 +01:00
parent 0996ace34f
commit 1ada62f6ec
1 changed files with 30 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

45
source/code/windows.js
View file

@ -61,6 +61,24 @@ class Draggable {
const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
/*switch (closestEdge) {
case 'left':
this.element.style.left = '0px';
this.element.style.top = `${rect.top}px`;
break;
case 'right':
this.element.style.left = `${windowWidth - rect.width}px`;
this.element.style.top = `${rect.top}px`;
break;
case 'top':
this.element.style.top = '0px';
this.element.style.left = `${rect.left}px`;
break;
case 'bottom':
this.element.style.top = `${windowHeight - rect.height}px`;
this.element.style.left = `${rect.left}px`;
break;
}*/
this.setPosition(closestEdge, this.barSize);
}
@ -129,19 +147,20 @@ class DragAdv {
}
onMouseDown(event) {
if (event.button === 0) {
this.isDragging = true;
this.showPlaceholder();
this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
this.offsetY = this.placeholder.getBoundingClientRect().height / 2;
this.element.style.display = 'none';
let x = event.clientX - this.offsetX;
let y = event.clientY - this.offsetY;
this.placeholder.style.left = `${x}px`;
this.placeholder.style.top = `${y}px`;
}
event.preventDefault();
}
@ -160,18 +179,18 @@ class DragAdv {
if (!this.isDragging) return;
this.isDragging = false;
this.element.style.display = 'block';
this.snapToEdges();
this.hidePlaceholder();
}
showPlaceholder() {
this.element.style.display = 'none';
this.placeholder.style.display = 'block';
}
hidePlaceholder() {
this.placeholder.style.display = 'none';
this.element.style.display = '';
}
snapToEdges() {
@ -188,27 +207,7 @@ class DragAdv {
const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
console.log(rect);
console.log(closestEdge);
this.setPosition(closestEdge, this.barSize);
/*switch (closestEdge) {
case 'left':
this.element.style.left = '0px';
this.element.style.top = `${rect.top}px`;
break;
case 'right':
this.element.style.left = `${windowWidth - rect.width}px`;
this.element.style.top = `${rect.top}px`;
break;
case 'top':
this.element.style.top = '0px';
this.element.style.left = `${rect.left}px`;
break;
case 'bottom':
this.element.style.top = `${windowHeight - rect.height}px`;
this.element.style.left = `${rect.left}px`;
break;
}*/
}
setPosition(side, barSize) {