Update builder.html
Browse files- builder.html +24 -30
builder.html
CHANGED
@@ -7,27 +7,21 @@
|
|
7 |
<!-- GrapesJS CSS -->
|
8 |
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
|
9 |
|
10 |
-
|
11 |
-
<style>
|
12 |
.gjs-row {
|
13 |
display: flex;
|
14 |
-
justify-content:
|
15 |
-
|
16 |
-
|
|
|
17 |
border: 1px dashed #ccc; /* Добавляем контур для строк */
|
18 |
-
margin-bottom: 10px;
|
19 |
}
|
20 |
.gjs-cell {
|
21 |
flex: 1;
|
22 |
border: 1px solid #ccc; /* Добавляем контур для ячеек */
|
23 |
padding: 10px;
|
24 |
text-align: center;
|
25 |
-
|
26 |
-
position: relative; /* Для корректного перемещения кнопок */
|
27 |
-
}
|
28 |
-
.draggable {
|
29 |
-
position: absolute;
|
30 |
-
cursor: move;
|
31 |
}
|
32 |
</style>
|
33 |
</head>
|
@@ -68,30 +62,30 @@
|
|
68 |
attributes: { class: 'gjs-block-section' }
|
69 |
});
|
70 |
|
71 |
-
// Simplified drag and drop functionality for buttons
|
72 |
document.addEventListener('DOMContentLoaded', function() {
|
73 |
-
|
74 |
-
|
75 |
|
76 |
-
|
77 |
-
|
78 |
-
|
79 |
-
offsetX = e.clientX -
|
80 |
-
offsetY = e.clientY -
|
81 |
-
}
|
82 |
-
});
|
83 |
|
84 |
-
|
85 |
-
|
86 |
-
|
87 |
-
|
88 |
-
|
89 |
-
|
90 |
|
91 |
-
|
92 |
-
|
|
|
93 |
});
|
94 |
});
|
95 |
</script>
|
96 |
</body>
|
|
|
97 |
</html>
|
|
|
7 |
<!-- GrapesJS CSS -->
|
8 |
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
|
9 |
|
10 |
+
<style>
|
|
|
11 |
.gjs-row {
|
12 |
display: flex;
|
13 |
+
justify-content: flex-start;
|
14 |
+
align-items: stretch;
|
15 |
+
flex-wrap: nowrap;
|
16 |
+
padding: 10px;
|
17 |
border: 1px dashed #ccc; /* Добавляем контур для строк */
|
|
|
18 |
}
|
19 |
.gjs-cell {
|
20 |
flex: 1;
|
21 |
border: 1px solid #ccc; /* Добавляем контур для ячеек */
|
22 |
padding: 10px;
|
23 |
text-align: center;
|
24 |
+
min-height: 50px; /* Добавляем минимальную высоту для ячеек */
|
|
|
|
|
|
|
|
|
|
|
25 |
}
|
26 |
</style>
|
27 |
</head>
|
|
|
62 |
attributes: { class: 'gjs-block-section' }
|
63 |
});
|
64 |
|
|
|
65 |
document.addEventListener('DOMContentLoaded', function() {
|
66 |
+
var buttons = document.querySelectorAll('.draggable');
|
67 |
+
var offsetX = 0, offsetY = 0, isDragging = false;
|
68 |
|
69 |
+
buttons.forEach(button => {
|
70 |
+
button.addEventListener('mousedown', function(e) {
|
71 |
+
isDragging = true;
|
72 |
+
offsetX = e.clientX - button.offsetLeft;
|
73 |
+
offsetY = e.clientY - button.offsetTop;
|
74 |
+
});
|
|
|
75 |
|
76 |
+
document.addEventListener('mousemove', function(e) {
|
77 |
+
if (isDragging) {
|
78 |
+
button.style.left = (e.clientX - offsetX) + 'px';
|
79 |
+
button.style.top = (e.clientY - offsetY) + 'px';
|
80 |
+
}
|
81 |
+
});
|
82 |
|
83 |
+
document.addEventListener('mouseup', function(e) {
|
84 |
+
isDragging = false;
|
85 |
+
});
|
86 |
});
|
87 |
});
|
88 |
</script>
|
89 |
</body>
|
90 |
+
</body>
|
91 |
</html>
|