File size: 3,285 Bytes
ca225b4 73549e6 4d7439c e7d81c0 550239d 4d7439c ddeb307 dbe9137 e7d81c0 550239d ddeb307 550239d 4d7439c 2edf9e2 ea6a088 2edf9e2 ca225b4 2edf9e2 ca225b4 2edf9e2 ca225b4 550239d ca225b4 550239d e7d81c0 550239d 9ee8c23 2edf9e2 4d7439c 2edf9e2 4d7439c 2edf9e2 4d7439c 2edf9e2 4d7439c 2edf9e2 ca225b4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GrapesJS Example</title>
<!-- GrapesJS CSS -->
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<!-- Your Custom CSS -->
<style>
.gjs-row {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
padding: 10px;
border: 1px dashed #ccc; /* Добавляем контур для строк */
}
.gjs-cell {
flex: 1;
border: 1px solid #ccc; /* Добавляем контур для ячеек */
padding: 10px;
text-align: center;
min-height: 50px; /* Добавляем минимальную высоту для ячеек */
}
@media (max-width: 768px) {
.gjs-row {
flex-wrap: wrap;
}
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="gjs"></div>
<!-- GrapesJS JS -->
<script src="https://unpkg.com/grapesjs"></script>
<!-- Your Custom JS -->
<script>
const editor = grapesjs.init({
container: '#gjs',
fromElement: true,
height: '100vh',
storageManager: { type: 0 },
plugins: [],
pluginsOpts: {}
});
// Example of adding a horizontal block with three items
const blockManager = editor.BlockManager;
blockManager.add('horizontal-block', {
label: 'Horizontal Block',
content: `
<div class="gjs-row">
<div class="gjs-cell"></div>
<div class="gjs-cell"></div>
<div class="gjs-cell"></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 buttons = document.querySelectorAll('.draggable');
var offsetX = 0, offsetY = 0, isDragging = false;
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('mouseup', function(e) {
isDragging = false;
});
});
});
</script>
</body>
</html> |