File size: 2,757 Bytes
ca225b4 e778b6e 550239d 487ef73 dbe9137 550239d dbe9137 550239d dbe9137 550239d 2edf9e2 ca225b4 2edf9e2 ca225b4 2edf9e2 ca225b4 550239d ca225b4 550239d 487ef73 550239d 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 |
<!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 -->
<!-- Your Custom CSS -->
<style>
.container {
display: flex;
justify-content: space-between;
width: 100%;
height: 100px;
}
.item {
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="container">
<div class="item"><button class="draggable" draggable="true">Давай</button></div>
<div class="item"><button class="draggable" draggable="true">Давай</button></div>
<div class="item"><button class="draggable" draggable="true">Давай</button></div>
</div>
`,
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> |