DmitrMakeev commited on
Commit
4d7439c
·
verified ·
1 Parent(s): e411f8a

Update builder.html

Browse files
Files changed (1) hide show
  1. 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
- <!-- Your Custom CSS -->
11
- <style>
12
  .gjs-row {
13
  display: flex;
14
- justify-content: space-between;
15
- width: 100%;
16
- height: 100px;
 
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
- margin: 0 5px; /* Добавляем отступы между ячейками */
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
- let currentButton = null;
74
- let offsetX = 0, offsetY = 0;
75
 
76
- document.addEventListener('mousedown', function(e) {
77
- if (e.target.classList.contains('draggable')) {
78
- currentButton = e.target;
79
- offsetX = e.clientX - currentButton.offsetLeft;
80
- offsetY = e.clientY - currentButton.offsetTop;
81
- }
82
- });
83
 
84
- document.addEventListener('mousemove', function(e) {
85
- if (currentButton) {
86
- currentButton.style.left = (e.clientX - offsetX) + 'px';
87
- currentButton.style.top = (e.clientY - offsetY) + 'px';
88
- }
89
- });
90
 
91
- document.addEventListener('mouseup', function() {
92
- currentButton = null;
 
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>