Update pages.html

pages.html

@@ -1191,10 +1191,24 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
 
 
 
-
+<style>
+  /* Ваши стили */
+  #grabbed-info {
+    position: fixed;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+  }
+</style>
 
   
-  
+<div id="grabbed-info"></div>
+
+
+<script src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/per.js"></script>
+
 <script type="text/javascript">
   var editor = grapesjs.init({
     container: '#gjs',
@@ -1315,8 +1329,6 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
       }
     }
   });
-</script>
-<script>
 
   // Добавляем кнопку линейки в верхнюю панель инструментов с использованием SVG-иконки
   editor.Panels.addButton('options', {
@@ -1328,11 +1340,82 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
     command: 'ruler-visibility', // Команда для переключения видимости линеек
     attributes: { title: 'Toggle Rulers' }
   });
+
+  // Функция для обновления информации о положении элемента
+  function updatePositionInfo(component) {
+    const positionInfo = document.getElementById('position-info');
+    if (component) {
+      const { x, y, width, height } = component.getBoundingRect();
+      const { width: canvasWidth, height: canvasHeight } = editor.Canvas.getCanvasElement().getBoundingClientRect();
+      const xPercent = (x / canvasWidth * 100).toFixed(2);
+      const yPercent = (y / canvasHeight * 100).toFixed(2);
+      positionInfo.textContent = `Position: X: ${x}px (${xPercent}%), Y: ${y}px (${yPercent}%), Width: ${width}px, Height: ${height}px`;
+    } else {
+      positionInfo.textContent = 'Position: ';
+    }
+  }
+
+  // Подписываемся на события перетаскивания и выбора элемента
+  editor.on('component:drag:start', (component) => {
+    updatePositionInfo(component);
+  });
+
+  editor.on('component:drag', (component) => {
+    updatePositionInfo(component);
+  });
+
+  editor.on('component:drag:stop', (component) => {
+    updatePositionInfo(component);
+  });
+
+  editor.on('component:selected', (component) => {
+    updatePositionInfo(component);
+  });
+
+  // Добавляем обработчики событий для перемещения элементов
+  let isDragging = false;
+  let offsetX = 0;
+  let offsetY = 0;
+  let selectedComponent: Component | null = null;
+
+  function startDrag(e: MouseEvent, component: Component) {
+    isDragging = true;
+    selectedComponent = component;
+    const rect = component.getEl().getBoundingClientRect();
+    offsetX = e.clientX - rect.left;
+    offsetY = e.clientY - rect.top;
+    document.addEventListener('mousemove', drag);
+    document.addEventListener('mouseup', stopDrag);
+  }
+
+  function drag(e: MouseEvent) {
+    if (!isDragging || !selectedComponent) return;
+    const newX = e.clientX - offsetX;
+    const newY = e.clientY - offsetY;
+    selectedComponent.set('position', { x: newX, y: newY });
+  }
+
+  function stopDrag() {
+    isDragging = false;
+    selectedComponent = null;
+    document.removeEventListener('mousemove', drag);
+    document.removeEventListener('mouseup', stopDrag);
+  }
+
+  editor.on('component:selected', (component: Component) => {
+    component.getEl().addEventListener('mousedown', (e: MouseEvent) => startDrag(e, component));
+  });
 </script>
 
+
+
+
+
+
 <script type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/rus/rus.js"></script>
 
 
+