Update builder.html

builder.html

@@ -9,6 +9,7 @@
 
     <!-- Your Custom CSS -->
      <!-- Your Custom CSS -->
+     <!-- Your Custom CSS -->
     <style>
         .container {
             display: flex;
@@ -46,40 +47,35 @@
             label: 'Horizontal Block',
             content: `
                 <div class="container">
-                    <div class="item">Item 1</div>
-                    <div class="item">Item 2</div>
-                    <div class="item">Item 3</div>
+                    <div class="item"><button class="draggable" draggable="true">Давай</button></div>
+                    <div class="item"><button class="draggable" draggable="true">Давай</button></div>
+                    <div class="item"><button class="draggable" draggable="true">Давай</button></div>
                 </div>
             `,
             attributes: { class: 'gjs-block-section' }
         });
 
-        // Example of adding a draggable button
-        blockManager.add('draggable-button', {
-            label: 'Draggable Button',
-            content: `<button class="draggable" draggable="true">Давай</button>`,
-            attributes: { class: 'gjs-block-section' }
-        });
-
         document.addEventListener('DOMContentLoaded', function() {
-            var button = document.querySelector('.draggable');
+            var buttons = document.querySelectorAll('.draggable');
             var offsetX = 0, offsetY = 0, isDragging = false;
 
-            button.addEventListener('mousedown', function(e) {
-                isDragging = true;
-                offsetX = e.clientX - button.offsetLeft;
-                offsetY = e.clientY - button.offsetTop;
-            });
+            buttons.forEach(button => {
+                button.addEventListener('mousedown', function(e) {
+                    isDragging = true;
+                    offsetX = e.clientX - button.offsetLeft;
+                    offsetY = e.clientY - button.offsetTop;
+                });
 
-            document.addEventListener('mousemove', function(e) {
-                if (isDragging) {
-                    button.style.left = (e.clientX - offsetX) + 'px';
-                    button.style.top = (e.clientY - offsetY) + 'px';
-                }
-            });
+                document.addEventListener('mousemove', function(e) {
+                    if (isDragging) {
+                        button.style.left = (e.clientX - offsetX) + 'px';
+                        button.style.top = (e.clientY - offsetY) + 'px';
+                    }
+                });
 
-            document.addEventListener('mouseup', function(e) {
-                isDragging = false;
+                document.addEventListener('mouseup', function(e) {
+                    isDragging = false;
+                });
             });
         });
     </script>