Я создаю конструктор веб-сайтов, используя GrapesJS. Я хочу использовать функцию изменения размера InteractJS в своем проекте. Я использовал «компонент: выбранный» для инициализации InteractJS. Но когда элемент выбран, его размер невозможно изменить.
Вот мой код `editor.on("comComponent:selected", (model) => {
const el = model.view.el;
// check for id
const id = el.getAttribute("id");
interact('#' + id)
.resizable({
edges: { top: true, left: true, bottom: true, right: true },
inertia: true,
listeners: {
move: function (event) {
const target = event.target;
// Get current position from data attributes or default to 0
let x = (parseFloat(target.getAttribute('data-x')) || 0);
let y = (parseFloat(target.getAttribute('data-y')) || 0);
// Update the element's width and height
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
// Update position based on the resize changes
x += event.deltaRect.left;
y += event.deltaRect.top;
// Apply the transform to maintain position
target.style.transform = `translate(${x}px, ${y}px)`;
// Store the position for future reference
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
}
});
});`
Подробнее здесь: https://stackoverflow.com/questions/793 ... h-grapesjs
