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

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