Update builder.html
Browse files- builder.html +21 -4
builder.html
CHANGED
|
@@ -7,7 +7,16 @@
|
|
| 7 |
<!-- GrapesJS CSS -->
|
| 8 |
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 11 |
.container {
|
| 12 |
display: flex;
|
| 13 |
justify-content: space-between;
|
|
@@ -44,14 +53,21 @@
|
|
| 44 |
label: 'Horizontal Block',
|
| 45 |
content: `
|
| 46 |
<div class="container">
|
| 47 |
-
<div class="item"
|
| 48 |
-
<div class="item"
|
| 49 |
-
<div class="item"
|
| 50 |
</div>
|
| 51 |
`,
|
| 52 |
attributes: { class: 'gjs-block-section' }
|
| 53 |
});
|
| 54 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 55 |
document.addEventListener('DOMContentLoaded', function() {
|
| 56 |
var buttons = document.querySelectorAll('.draggable');
|
| 57 |
var offsetX = 0, offsetY = 0, isDragging = false;
|
|
@@ -77,4 +93,5 @@
|
|
| 77 |
});
|
| 78 |
</script>
|
| 79 |
</body>
|
|
|
|
| 80 |
</html>
|
|
|
|
| 7 |
<!-- GrapesJS CSS -->
|
| 8 |
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
|
| 9 |
|
| 10 |
+
<!DOCTYPE html>
|
| 11 |
+
<html lang="en">
|
| 12 |
+
<head>
|
| 13 |
+
<meta charset="UTF-8">
|
| 14 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 15 |
+
<title>GrapesJS Example</title>
|
| 16 |
+
<!-- GrapesJS CSS -->
|
| 17 |
+
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
|
| 18 |
+
<!-- Your Custom CSS -->
|
| 19 |
+
<style>
|
| 20 |
.container {
|
| 21 |
display: flex;
|
| 22 |
justify-content: space-between;
|
|
|
|
| 53 |
label: 'Horizontal Block',
|
| 54 |
content: `
|
| 55 |
<div class="container">
|
| 56 |
+
<div class="item"></div>
|
| 57 |
+
<div class="item"></div>
|
| 58 |
+
<div class="item"></div>
|
| 59 |
</div>
|
| 60 |
`,
|
| 61 |
attributes: { class: 'gjs-block-section' }
|
| 62 |
});
|
| 63 |
|
| 64 |
+
// Example of adding a draggable button
|
| 65 |
+
blockManager.add('draggable-button', {
|
| 66 |
+
label: 'Draggable Button',
|
| 67 |
+
content: `<button class="draggable" draggable="true">Давай</button>`,
|
| 68 |
+
attributes: { class: 'gjs-block-section' }
|
| 69 |
+
});
|
| 70 |
+
|
| 71 |
document.addEventListener('DOMContentLoaded', function() {
|
| 72 |
var buttons = document.querySelectorAll('.draggable');
|
| 73 |
var offsetX = 0, offsetY = 0, isDragging = false;
|
|
|
|
| 93 |
});
|
| 94 |
</script>
|
| 95 |
</body>
|
| 96 |
+
</html>
|
| 97 |
</html>
|