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

feat: add new draggable elements

Browse source
This commit is contained in:
sthag 2024-08-15 22:49:11 +02:00
parent 3a867c169a
commit 22ad9eb6cc
1 changed files with 76 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -21,89 +21,100 @@ tags:
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div id="space"></div> <button id="addFrame">Add</button>
<div id="space"></div>
{% endblock %} {% endblock %}
{%- block script %} {%- block script %}
<script> <script>
// Get the space element // Get the space element
const space = document.getElementById('space'); const space = document.getElementById('space');
const addFrameButton = document.getElementById('addFrame');
// Create a new div element // Function to create a new div element
const newDiv = document.createElement('div'); function createNewDiv() {
newDiv.style.position = 'absolute'; const newDiv = document.createElement('div');
newDiv.style.width = '100px'; newDiv.style.position = 'absolute';
newDiv.style.height = '100px'; newDiv.style.width = '100px';
newDiv.style.background = 'cyan'; newDiv.style.height = '100px';
newDiv.style.cursor = 'move'; newDiv.style.background = 'red';
newDiv.style.cursor = 'move';
// Add event listeners for dragging // Add event listeners for dragging
let isDown = false; let isDown = false;
let offset = [0, 0]; let offset = [0, 0];
newDiv.addEventListener('mousedown', (event) => { newDiv.addEventListener('mousedown', (event) => {
if (event.button === 0) { // Left mouse button if (event.button === 0) { // Left mouse button
isDown = true; isDown = true;
offset = [ offset = [
newDiv.offsetLeft - event.clientX, newDiv.offsetLeft - event.clientX,
newDiv.offsetTop - event.clientY newDiv.offsetTop - event.clientY
]; ];
} }
}); });
document.addEventListener('mouseup', () => { document.addEventListener('mouseup', () => {
isDown = false; isDown = false;
}); });
document.addEventListener('mousemove', (event) => { document.addEventListener('mousemove', (event) => {
if (isDown) { if (isDown) {
const maxX = window.innerWidth - newDiv.offsetWidth; const maxX = window.innerWidth - newDiv.offsetWidth;
const maxY = window.innerHeight - newDiv.offsetHeight; const maxY = window.innerHeight - newDiv.offsetHeight;
let x = event.clientX + offset[0]; let x = event.clientX + offset[0];
let y = event.clientY + offset[1]; let y = event.clientY + offset[1];
// Boundary checks // Boundary checks
if (x < 0) x = 0; if (x < 0) x = 0;
if (y < 0) y = 0; if (y < 0) y = 0;
if (x > maxX) x = maxX; if (x > maxX) x = maxX;
if (y > maxY) y = maxY; if (y > maxY) y = maxY;
newDiv.style.left = `${x}px`; newDiv.style.left = `${x}px`;
newDiv.style.top = `${y}px`; newDiv.style.top = `${y}px`;
} }
}); });
// Save position and size // Save position and size
const saveData = () => { const saveData = () => {
const data = { const data = {
x: newDiv.offsetLeft, x: newDiv.offsetLeft,
y: newDiv.offsetTop, y: newDiv.offsetTop,
width: newDiv.offsetWidth, width: newDiv.offsetWidth,
height: newDiv.offsetHeight height: newDiv.offsetHeight
};
// Save data to local storage or a database
localStorage.setItem(`divData${newDiv.id}`, JSON.stringify(data));
}; };
// Save data to local storage or a database
localStorage.setItem('divData', JSON.stringify(data));
};
// Load saved data // Load saved data
const loadData = () => { const loadData = () => {
const data = localStorage.getItem('divData'); const data = localStorage.getItem(`divData${newDiv.id}`);
if (data) { if (data) {
const parsedData = JSON.parse(data); const parsedData = JSON.parse(data);
newDiv.style.left = `${parsedData.x}px`; newDiv.style.left = `${parsedData.x}px`;
newDiv.style.top = `${parsedData.y}px`; newDiv.style.top = `${parsedData.y}px`;
newDiv.style.width = `${parsedData.width}px`; newDiv.style.width = `${parsedData.width}px`;
newDiv.style.height = `${parsedData.height}px`; newDiv.style.height = `${parsedData.height}px`;
} }
}; };
// Add the new div to the space // Add the new div to the space
space.appendChild(newDiv); newDiv.id = `newDiv${space.children.length}`;
space.appendChild(newDiv);
// Call the save function when the user stops dragging // Call the save function when the user stops dragging
document.addEventListener('mouseup', saveData); document.addEventListener('mouseup', saveData);
// Load saved data on page load // Load saved data on page load
loadData(); loadData();
}
// Add event listener to the add space button
addFrameButton.addEventListener('click', createNewDiv);
// Create the first new div element
createNewDiv();
</script> </script>
{% endblock %} {% endblock %}