В firefox resizemove и dragMoveListener события запускаются только один раз и выходят из функции при выполнении действия.То же самое правильно работает в браузере Chrome.Было бы полезно найти причину неработающего в firefox
//Adding event to rect element inside svg
changeDimension(event: any) {
interact(event.firstElementChild)
.draggable({
inertia: true,
autoScroll: true,
onmove: this.dragMoveListener,
onend: function (event) {
const textEl = event.target.querySelector('.close');
textEl && (textEl.textContent =
'moved a distance of '
+ (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
Math.pow(event.pageY - event.y0, 2) | 0))
.toFixed(2) + 'px');
}
})
.resizable({
edges: { left: true, right: true, bottom: true, top: true }
})
.on('resizemove', (event :any) => {
let target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0);
target.style.width = event.rect.width+'px';
target.style.height = event.rect.height+'px';
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform = target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
target.nextElementSibling.style.transform ='translate(' + x + 'px, ' + y + 'px)';
target.nextElementSibling.nextElementSibling.style.transform ='translate(' + x + 'px, ' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
});
}
// triggers onmove
dragMoveListener(event:any) {
const target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
target.style.MozTransform ='translate(' + x + 'px, ' + y + 'px)';
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.nextElementSibling.style.transform ='translate(' + x + 'px, ' + y + 'px)';
target.nextElementSibling.nextElementSibling.style.transform ='translate(' + x + 'px, ' + y + 'px)';
}
I expect to trigger on move and resize function for required no.of times