Update builder.html

builder.html

@@ -8,19 +8,26 @@
     <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
 
       <!-- Your Custom CSS -->
-    <style>
+      <style>
         .gjs-row {
             display: flex;
             justify-content: space-between;
             width: 100%;
             height: 100px;
             border: 1px dashed #ccc; /* Добавляем контур для строк */
+            margin-bottom: 10px;
         }
         .gjs-cell {
             flex: 1;
             border: 1px solid #ccc; /* Добавляем контур для ячеек */
             padding: 10px;
             text-align: center;
+            margin: 0 5px; /* Добавляем отступы между ячейками */
+            position: relative; /* Для корректного перемещения кнопок */
+        }
+        .draggable {
+            position: absolute;
+            cursor: move;
         }
     </style>
 </head>
@@ -61,27 +68,28 @@
             attributes: { class: 'gjs-block-section' }
         });
 
+        // Simplified drag and drop functionality for buttons
         document.addEventListener('DOMContentLoaded', function() {
-            var buttons = document.querySelectorAll('.draggable');
-            var offsetX = 0, offsetY = 0, isDragging = false;
+            let currentButton = null;
+            let offsetX = 0, offsetY = 0;
 
-            buttons.forEach(button => {
-                button.addEventListener('mousedown', function(e) {
-                    isDragging = true;
-                    offsetX = e.clientX - button.offsetLeft;
-                    offsetY = e.clientY - button.offsetTop;
-                });
+            document.addEventListener('mousedown', function(e) {
+                if (e.target.classList.contains('draggable')) {
+                    currentButton = e.target;
+                    offsetX = e.clientX - currentButton.offsetLeft;
+                    offsetY = e.clientY - currentButton.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 (currentButton) {
+                    currentButton.style.left = (e.clientX - offsetX) + 'px';
+                    currentButton.style.top = (e.clientY - offsetY) + 'px';
+                }
+            });
 
-                document.addEventListener('mouseup', function(e) {
-                    isDragging = false;
-                });
+            document.addEventListener('mouseup', function() {
+                currentButton = null;
             });
         });
     </script>