Hugging Face's logo

Spaces:
DMTuit
/
psy_vk2
Sleeping

App Files Community
DmitrMakeev commited on
Commit
2edf9e2
·
verified ·
1 Parent(s): ca225b4

Update builder.html

Browse files
Files changed (1) hide show
  1. builder.html +36 -23
builder.html CHANGED
@@ -7,46 +7,59 @@
7
  <!-- GrapesJS CSS -->
8
  <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
9
 
 
 
 
 
 
 
 
10
  </head>
11
  <body>
12
  <div id="gjs"></div>
13
 
14
  <!-- GrapesJS JS -->
15
  <script src="https://unpkg.com/grapesjs"></script>
16
- <!-- GrapesJS Russian Language File -->
17
- <script src="https://unpkg.com/grapesjs/dist/i18n/ru.js"></script>
18
-
19
-
20
- <script type="text/javascript">
21
  const editor = grapesjs.init({
22
  container: '#gjs',
23
  fromElement: true,
24
  height: '100vh',
25
  storageManager: { type: 0 },
26
  plugins: [],
27
- pluginsOpts: {},
28
- i18n: {
29
- locale: 'ru', // Устанавливаем русский язык
30
- detectLocale: true, // Автоматически определяем язык браузера
31
- localeFallback: 'en', // Язык по умолчанию, если язык не поддерживается
32
- messages: {
33
- ru: {
34
- 'blockManager.labels.section': 'Раздел',
35
- 'blockManager.labels.text': 'Текст',
36
- 'blockManager.labels.image': 'Изображение',
37
- // Добавьте другие переводы здесь
38
- }
39
- }
40
- }
41
  });
42
 
43
- // Example of adding a button with JavaScript code
44
  const blockManager = editor.BlockManager;
45
- blockManager.add('example-button', {
46
- label: 'Пример кнопки',
47
- content: `<button onclick="alert('Привет, Мир!');">Нажми меня</button>`,
48
  attributes: { class: 'gjs-block-section' }
49
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  </script>
51
  </body>
52
  </html>
 
7
  <!-- GrapesJS CSS -->
8
  <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
9
 
10
+
11
+ <style>
12
+ .draggable {
13
+ position: absolute;
14
+ cursor: move;
15
+ }
16
+ </style>
17
  </head>
18
  <body>
19
  <div id="gjs"></div>
20
 
21
  <!-- GrapesJS JS -->
22
  <script src="https://unpkg.com/grapesjs"></script>
23
+ <!-- Your Custom JS -->
24
+ <script>
 
 
 
25
  const editor = grapesjs.init({
26
  container: '#gjs',
27
  fromElement: true,
28
  height: '100vh',
29
  storageManager: { type: 0 },
30
  plugins: [],
31
+ pluginsOpts: {}
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  });
33
 
34
+ // Example of adding a draggable button
35
  const blockManager = editor.BlockManager;
36
+ blockManager.add('draggable-button', {
37
+ label: 'Draggable Button',
38
+ content: `<button class="draggable" draggable="true">Давай</button>`,
39
  attributes: { class: 'gjs-block-section' }
40
  });
41
+
42
+ document.addEventListener('DOMContentLoaded', function() {
43
+ var button = document.querySelector('.draggable');
44
+ var offsetX = 0, offsetY = 0, isDragging = false;
45
+
46
+ button.addEventListener('mousedown', function(e) {
47
+ isDragging = true;
48
+ offsetX = e.clientX - button.offsetLeft;
49
+ offsetY = e.clientY - button.offsetTop;
50
+ });
51
+
52
+ document.addEventListener('mousemove', function(e) {
53
+ if (isDragging) {
54
+ button.style.left = (e.clientX - offsetX) + 'px';
55
+ button.style.top = (e.clientY - offsetY) + 'px';
56
+ }
57
+ });
58
+
59
+ document.addEventListener('mouseup', function(e) {
60
+ isDragging = false;
61
+ });
62
+ });
63
  </script>
64
  </body>
65
  </html>