2023-04-28 21:20:56 +02:00
|
|
|
|
|
|
|
|
|
|
|
class DragDropManager {
|
|
|
|
dragContainer;
|
|
|
|
movePageTo;
|
|
|
|
pageDragging;
|
|
|
|
draggelEl;
|
|
|
|
draggedImageEl;
|
|
|
|
hoveredEl;
|
|
|
|
|
2023-04-29 12:43:12 +02:00
|
|
|
constructor(id) {
|
2023-04-28 21:20:56 +02:00
|
|
|
this.dragContainer = document.getElementById(id);
|
|
|
|
this.pageDragging = false;
|
|
|
|
this.hoveredEl = undefined;
|
|
|
|
this.draggelEl = undefined
|
|
|
|
this.draggedImageEl = undefined;
|
|
|
|
|
|
|
|
this.startDraggingPage = this.startDraggingPage.bind(this);
|
|
|
|
this.onDragEl = this.onDragEl.bind(this);
|
|
|
|
this.stopDraggingPage = this.stopDraggingPage.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
startDraggingPage(div, imageSrc) {
|
|
|
|
this.pageDragging = true;
|
|
|
|
this.draggedEl = div;
|
|
|
|
div.classList.add('dragging');
|
|
|
|
const imgEl = document.createElement('img');
|
|
|
|
imgEl.classList.add('dragged-img');
|
|
|
|
imgEl.src = imageSrc;
|
|
|
|
this.draggedImageEl = imgEl;
|
|
|
|
this.draggedImageEl.style.left = screenX;
|
|
|
|
this.draggedImageEl.style.right = screenY;
|
|
|
|
this.dragContainer.appendChild(imgEl);
|
2023-04-29 12:43:12 +02:00
|
|
|
window.addEventListener('mouseup', this.stopDraggingPage)
|
2023-04-28 21:20:56 +02:00
|
|
|
window.addEventListener('mousemove', this.onDragEl)
|
|
|
|
}
|
|
|
|
|
|
|
|
onDragEl(mouseEvent) {
|
|
|
|
const { clientX, clientY } = mouseEvent;
|
|
|
|
if(this.draggedImageEl) {
|
|
|
|
this.draggedImageEl.style.left = `${clientX}px`;
|
|
|
|
this.draggedImageEl.style.top = `${clientY}px`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
stopDraggingPage() {
|
|
|
|
window.removeEventListener('mousemove', this.onDragEl);
|
2023-04-29 12:43:12 +02:00
|
|
|
window.removeEventListener('mouseup', this.stopDraggingPage)
|
2023-04-28 21:20:56 +02:00
|
|
|
this.draggedImageEl = undefined;
|
|
|
|
this.pageDragging = false;
|
|
|
|
this.draggedEl.classList.remove('dragging');
|
|
|
|
this.hoveredEl.classList.remove('draghover');
|
|
|
|
this.dragContainer.childNodes.forEach((dragChild) => {
|
|
|
|
this.dragContainer.removeChild(dragChild);
|
|
|
|
})
|
|
|
|
this.movePageTo(this.draggedEl, this.hoveredEl);
|
|
|
|
}
|
|
|
|
|
2023-04-29 12:43:12 +02:00
|
|
|
setActions({ movePageTo }) {
|
|
|
|
this.movePageTo = movePageTo;
|
|
|
|
}
|
|
|
|
|
2023-04-28 21:20:56 +02:00
|
|
|
|
2023-04-29 12:43:12 +02:00
|
|
|
adapt(div) {
|
2023-04-28 21:20:56 +02:00
|
|
|
const onDragStart = () => {
|
2023-04-29 12:43:12 +02:00
|
|
|
this.startDraggingPage(div, div.querySelector('img').src);
|
2023-04-28 21:20:56 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const onMouseEnter = () => {
|
|
|
|
if (this.pageDragging) {
|
|
|
|
this.hoveredEl = div;
|
|
|
|
div.classList.add('draghover');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const onMouseLeave = () => {
|
|
|
|
this.hoveredEl = undefined
|
|
|
|
div.classList.remove('draghover');
|
|
|
|
}
|
|
|
|
|
|
|
|
div.addEventListener('dragstart', onDragStart);
|
|
|
|
div.addEventListener('mouseenter', onMouseEnter);
|
|
|
|
div.addEventListener('mouseleave', onMouseLeave);
|
2023-04-29 12:43:12 +02:00
|
|
|
|
|
|
|
return div;
|
2023-04-28 21:20:56 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default DragDropManager;
|