js/per.js

import 'grapesjs/dist/css/grapes.min.css'

import grapesjs, { usePlugin } from 'grapesjs'
import grapesjsBlocks from 'grapesjs-blocks-basic'

import type { Editor, Component } from 'grapesjs'

function runExample () {
  const protectedCss: string = `
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html, body, [data-gjs-type="wrapper"] {
      width: 100%;
      height: 100%;
    }
  `
  const editor = grapesjs.init({
    container: '#gjs', // same as id in the "index.html" file
    height: '100vh',
    canvas: {
      infiniteCanvas: true
    },
    fromElement: true,
    storageManager: false,
    protectedCss,
    plugins: [
      usePlugin(grapesjsBlocks, {
        flexGrid: true
      })
    ]
  })

  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));
  });
}

runExample()