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));
|
||||
document.addEventListener('mousemove', this.onMouseMove.bind(this));
|
||||
document.addEventListener('mouseup', this.onMouseUp.bind(this));
|
||||
this.setPosition('bottom');
|
||||
this.setPosition('bottom', this.barSize);
|
||||
}
|
||||
|
||||
onMouseDown(event) {
|
||||
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.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();
|
||||
}
|
||||
|
||||
|
|
@ -146,15 +152,8 @@ class DragAdv {
|
|||
let x = event.clientX - this.offsetX;
|
||||
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.top = `${y}px`;
|
||||
// this.placeholder.style.display = 'block';
|
||||
}
|
||||
|
||||
onMouseUp() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue