File size: 2,963 Bytes
ca225b4 ddeb307 9ee8c23 e7d81c0 550239d dbe9137 550239d ddeb307 dbe9137 e7d81c0 550239d ddeb307 550239d 2edf9e2 ca225b4 2edf9e2 ca225b4 2edf9e2 ca225b4 550239d ca225b4 550239d e7d81c0 550239d 9ee8c23 2edf9e2 487ef73 2edf9e2 487ef73 2edf9e2 487ef73 2edf9e2 487ef73 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 |
<!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: space-between;
width: 100%;
height: 100px;
border: 1px dashed #ccc; /* Добавляем контур для строк */
}
.gjs-cell {
flex: 1;
border: 1px solid #ccc; /* Добавляем контур для ячеек */
padding: 10px;
text-align: center;
}
</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> |