feat: add new draggable elements

source/screens/demo/examples/ui/drag.njk

@@ -21,6 +21,7 @@ tags:
 {% endblock %}
 
 {% block body %}
+  <button id="addFrame">Add</button>
   <div id="space"></div>
 {% endblock %}
 
@@ -28,20 +29,22 @@ tags:
   <script>
 // Get the space element
 const space = document.getElementById('space');
+const addFrameButton = document.getElementById('addFrame');
 
-// Create a new div element
-const newDiv = document.createElement('div');
-newDiv.style.position = 'absolute';
-newDiv.style.width = '100px';
-newDiv.style.height = '100px';
-newDiv.style.background = 'cyan';
-newDiv.style.cursor = 'move';
+// 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.background = 'red';
+  newDiv.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];
 
-newDiv.addEventListener('mousedown', (event) => {
+  newDiv.addEventListener('mousedown', (event) => {
     if (event.button === 0) { // Left mouse button
       isDown = true;
       offset = [
@@ -49,13 +52,13 @@ newDiv.addEventListener('mousedown', (event) => {
         newDiv.offsetTop - event.clientY
       ];
     }
-});
+  });
 
-document.addEventListener('mouseup', () => {
+  document.addEventListener('mouseup', () => {
     isDown = false;
-});
+  });
 
-document.addEventListener('mousemove', (event) => {
+  document.addEventListener('mousemove', (event) => {
     if (isDown) {
       const maxX = window.innerWidth - newDiv.offsetWidth;
       const maxY = window.innerHeight - newDiv.offsetHeight;
@@ -71,10 +74,10 @@ document.addEventListener('mousemove', (event) => {
       newDiv.style.left = `${x}px`;
       newDiv.style.top = `${y}px`;
     }
-});
+  });
 
-// Save position and size
-const saveData = () => {
+  // Save position and size
+  const saveData = () => {
     const data = {
       x: newDiv.offsetLeft,
       y: newDiv.offsetTop,
@@ -82,12 +85,12 @@ const saveData = () => {
       height: newDiv.offsetHeight
     };
     // Save data to local storage or a database
-  localStorage.setItem('divData', JSON.stringify(data));
-};
+    localStorage.setItem(`divData${newDiv.id}`, JSON.stringify(data));
+  };
 
-// Load saved data
-const loadData = () => {
-  const data = localStorage.getItem('divData');
+  // 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`;
@@ -95,15 +98,23 @@ const loadData = () => {
       newDiv.style.width = `${parsedData.width}px`;
       newDiv.style.height = `${parsedData.height}px`;
     }
-};
+  };
 
-// Add the new div to the space
-space.appendChild(newDiv);
+  // 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);
+  // Call the save function when the user stops dragging
+  document.addEventListener('mouseup', saveData);
 
-// Load saved data on page load
-loadData();
+  // Load saved data on page load
+  loadData();
+}
+
+// Add event listener to the add space button
+addFrameButton.addEventListener('click', createNewDiv);
+
+// Create the first new div element
+createNewDiv();
   </script>
 {% endblock %}