Я создаю конструктор веб-сайтов, используя 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
Как я могу интегрировать InteractJS с GrapesJS ⇐ Javascript
Форум по Javascript
-
Anonymous
1737478446
Anonymous
Я создаю конструктор веб-сайтов, используя 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);
}
}
});
});`
Подробнее здесь: [url]https://stackoverflow.com/questions/79375241/how-can-i-integrate-interactjs-with-grapesjs[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия