fix: Task bar drag behaviour
- Placeholder is centered to mouse cursor - Placeholder is positioned on mouse down not only on move
This commit is contained in:
parent
e0cfcfac13
commit
0996ace34f
1 changed files with 12 additions and 13 deletions
|
|
@ -125,18 +125,24 @@ class DragAdv {
|
||||||
this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
|
this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
|
||||||
document.addEventListener('mousemove', this.onMouseMove.bind(this));
|
document.addEventListener('mousemove', this.onMouseMove.bind(this));
|
||||||
document.addEventListener('mouseup', this.onMouseUp.bind(this));
|
document.addEventListener('mouseup', this.onMouseUp.bind(this));
|
||||||
this.setPosition('bottom');
|
this.setPosition('bottom', this.barSize);
|
||||||
}
|
}
|
||||||
|
|
||||||
onMouseDown(event) {
|
onMouseDown(event) {
|
||||||
this.isDragging = true;
|
this.isDragging = true;
|
||||||
// this.offsetX = event.clientX - this.element.getBoundingClientRect().left;
|
|
||||||
// this.offsetY = event.clientY - this.element.getBoundingClientRect().top;
|
|
||||||
this.offsetX = 0;
|
|
||||||
this.offsetY = 0;
|
|
||||||
this.element.style.display = 'none';
|
|
||||||
|
|
||||||
this.showPlaceholder();
|
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();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -146,15 +152,8 @@ class DragAdv {
|
||||||
let x = event.clientX - this.offsetX;
|
let x = event.clientX - this.offsetX;
|
||||||
let y = event.clientY - this.offsetY;
|
let y = event.clientY - this.offsetY;
|
||||||
|
|
||||||
// Update the position of the element
|
|
||||||
// this.element.style.left = `${x}px`;
|
|
||||||
// this.element.style.top = `${y}px`;
|
|
||||||
// this.element.style.display = 'none';
|
|
||||||
|
|
||||||
// Update placeholder position
|
|
||||||
this.placeholder.style.left = `${x}px`;
|
this.placeholder.style.left = `${x}px`;
|
||||||
this.placeholder.style.top = `${y}px`;
|
this.placeholder.style.top = `${y}px`;
|
||||||
// this.placeholder.style.display = 'block';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMouseUp() {
|
onMouseUp() {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue