115 lines
3.1 KiB
JavaScript
115 lines
3.1 KiB
JavaScript
// Creates a div element which is draggable
|
|
class NewDiv {
|
|
constructor(x, y, width, height, backgroundColor, content) {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.width = width;
|
|
this.height = height;
|
|
this.backgroundColor = backgroundColor;
|
|
this.element = null;
|
|
this.content = content;
|
|
}
|
|
|
|
// Create the div element
|
|
createDiv() {
|
|
this.element = this._content;
|
|
this.element.style.position = 'absolute';
|
|
this.element.style.left = `${this.x}px`;
|
|
this.element.style.top = `${this.y}px`;
|
|
this.element.style.width = `${this.width}px`;
|
|
this.element.style.height = `${this.height}px`;
|
|
this.element.style.background = this.backgroundColor;
|
|
this.element.style.cursor = 'move';
|
|
|
|
// Add event listeners for dragging
|
|
let isDown = false;
|
|
let offset = [0, 0];
|
|
|
|
this
|
|
.element
|
|
.addEventListener('mousedown', (event) => {
|
|
if (event.button === 0) { // Left mouse button
|
|
isDown = true;
|
|
offset = [
|
|
this.element.offsetLeft - event.clientX,
|
|
this.element.offsetTop - event.clientY
|
|
];
|
|
}
|
|
});
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
isDown = false;
|
|
});
|
|
|
|
document.addEventListener('mousemove', (event) => {
|
|
if (isDown) {
|
|
const maxX = window.innerWidth - this.element.offsetWidth;
|
|
const maxY = window.innerHeight - this.element.offsetHeight;
|
|
let x = event.clientX + offset[0];
|
|
let y = event.clientY + offset[1];
|
|
|
|
// Boundary checks
|
|
if (x < 0)
|
|
x = 0;
|
|
if (y < 0)
|
|
y = 0;
|
|
if (x > maxX)
|
|
x = maxX;
|
|
if (y > maxY)
|
|
y = maxY;
|
|
|
|
this.element.style.left = `${x}px`;
|
|
this.element.style.top = `${y}px`;
|
|
}
|
|
});
|
|
|
|
// Save position and size
|
|
const saveData = () => {
|
|
const data = {
|
|
x: this.element.offsetLeft,
|
|
y: this.element.offsetTop,
|
|
width: this.element.offsetWidth,
|
|
height: this.element.offsetHeight
|
|
};
|
|
// Save data to local storage or a database
|
|
localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
|
|
};
|
|
|
|
// Load saved data
|
|
const loadData = () => {
|
|
const data = localStorage.getItem(`divData${this.element.id}`);
|
|
if (data) {
|
|
const parsedData = JSON.parse(data);
|
|
this.element.style.left = `${parsedData.x}px`;
|
|
this.element.style.top = `${parsedData.y}px`;
|
|
this.element.style.width = `${parsedData.width}px`;
|
|
this.element.style.height = `${parsedData.height}px`;
|
|
}
|
|
};
|
|
|
|
// Call the save function when the user stops dragging
|
|
document.addEventListener('mouseup', saveData);
|
|
|
|
// Load saved data on page load
|
|
loadData();
|
|
}
|
|
|
|
// FIXME: this.element wird von appendToFrame() verwendet
|
|
get content() {
|
|
return this._content = this.content;
|
|
}
|
|
|
|
set content(value) {
|
|
if (!value) {
|
|
value = document.createElement('div');
|
|
}
|
|
|
|
this._content = value;
|
|
}
|
|
|
|
// Append the div to the space
|
|
appendToFrame(space) {
|
|
this.element.id = `newDiv${space.children.length}`;
|
|
space.appendChild(this.element);
|
|
}
|
|
}
|