File size: 3,310 Bytes
ca225b4 73549e6 af47b43 4d7439c af47b43 e7d81c0 550239d af47b43 ddeb307 dbe9137 e7d81c0 550239d ddeb307 550239d 4d7439c 2edf9e2 af47b43 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 |
<!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 -->
<!-- Your Custom CSS for GrapesJS Editor -->
<style>
.gjs-dashed *[data-gjs-highlightable] {
outline: 1px dashed rgba(170, 170, 170, 0.7);
outline-offset: -2px;
}
.gjs-row {
display: flex;
justify-content: space-between;
border: 1px dashed #ccc; /* Добавляем контур для строк */
}
.gjs-cell {
flex: 1;
border: 1px solid #ccc; /* Добавляем контур для ячеек */
padding: 10px;
text-align: center;
min-height: 50px; /* Добавляем минимальную высоту для ячеек */
}
.draggable {
position: absolute;
cursor: move;
}
</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> |