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,13 +29,15 @@ tags:
   <script>
 // Get the space element
 const space = document.getElementById('space');
+const addFrameButton = document.getElementById('addFrame');
 
-// Create a new div element
+// 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 = 'cyan';
+  newDiv.style.background = 'red';
   newDiv.style.cursor = 'move';
 
   // Add event listeners for dragging
@@ -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');
+    const data = localStorage.getItem(`divData${newDiv.id}`);
     if (data) {
       const parsedData = JSON.parse(data);
       newDiv.style.left = `${parsedData.x}px`;
@@ -98,6 +101,7 @@ const loadData = () => {
   };
 
   // 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
@@ -105,5 +109,12 @@ document.addEventListener('mouseup', saveData);
 
   // 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 %}