interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: draggable is now a class

Browse source
This commit is contained in:
sthag 2024-08-15 23:06:21 +02:00
parent 8e06f8feb8
commit 4cf279bee5
1 changed files with 113 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

207
source/screens/demo/examples/ui/drag.njk
View file

@ -26,108 +26,127 @@ tags:
{% endblock %}
{%- block script %}
<script>
// Get the space element
const space = document.getElementById('space');
const addFrameButton = document.getElementById('addFrame');
<script>
// Define the NewDiv class
class NewDiv {
constructor(x, y, width, height, backgroundColor) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.backgroundColor = backgroundColor;
this.element = null;
}
// Function to create a new div element
function createNewDiv() {
const newDiv = document.createElement('div');
newDiv.style.position = 'absolute';
newDiv.style.width = '100px';
newDiv.style.height = '100px';
newDiv.style.cursor = 'move';
// Create the div element
createDiv() {
this.element = document.createElement('div');
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];
// Add event listeners for dragging
let isDown = false;
let offset = [0, 0];
// Generate a random background color
const randomColor = getRandomColor();
newDiv.style.background = randomColor;
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
];
}
});
newDiv.addEventListener('mousedown', (event) => {
if (event.button === 0) { // Left mouse button
isDown = true;
offset = [
newDiv.offsetLeft - event.clientX,
newDiv.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();
}
// Append the div to the space
appendToFrame(space) {
this.element.id = `newDiv${space.children.length}`;
space.appendChild(this.element);
}
}
});
document.addEventListener('mouseup', () => {
isDown = false;
});
document.addEventListener('mousemove', (event) => {
if (isDown) {
const maxX = window.innerWidth - newDiv.offsetWidth;
const maxY = window.innerHeight - newDiv.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;
newDiv.style.left = `${x}px`;
newDiv.style.top = `${y}px`;
// Function to generate a random color
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
});
// Save position and size
const saveData = () => {
const data = {
x: newDiv.offsetLeft,
y: newDiv.offsetTop,
width: newDiv.offsetWidth,
height: newDiv.offsetHeight
};
// Save data to local storage or a database
localStorage.setItem(`divData${newDiv.id}`, JSON.stringify(data));
};
// Get the space element
const space = document.getElementById('space');
const addFrameButton = document.getElementById('addFrame');
// Load saved data
const loadData = () => {
const data = localStorage.getItem(`divData${newDiv.id}`);
if (data) {
const parsedData = JSON.parse(data);
newDiv.style.left = `${parsedData.x}px`;
newDiv.style.top = `${parsedData.y}px`;
newDiv.style.width = `${parsedData.width}px`;
newDiv.style.height = `${parsedData.height}px`;
}
};
// Add event listener to the add space button
addFrameButton.addEventListener('click', () => {
const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
newDiv.createDiv();
newDiv.appendToFrame(space);
});
// Add the new div to the space
newDiv.id = `newDiv${space.children.length}`;
space.appendChild(newDiv);
// Call the save function when the user stops dragging
document.addEventListener('mouseup', saveData);
// Load saved data on page load
loadData();
}
// Function to generate a random color
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Add event listener to the add space button
addFrameButton.addEventListener('click', createNewDiv);
// Create the first new div element
createNewDiv();
</script>
// Create a new NewDiv instance
const newDiv = new NewDiv(100, 100, 800, 600, '#000');
newDiv.createDiv();
newDiv.appendToFrame(document.getElementById('space'));
</script>
{% endblock %}