if (dx > 0) {mat.e = 0;}
else if (dx < (elRect.width - imgRect.width)) {mat.e = elRect.width - imgRect.width;}
else {mat.e = dx;}
mat.translateSelf(dx, dy);
document.querySelector('.fertezj img').style.transform = mat.toString();
document.querySelector('.fertezj img').style.transform = "translate(" + dx + "px," + dy + "px)";
https://habr.com/ru/articles/696266/comments/#comment_24864662
https://stackoverflow.com/questions/73678841/how-to-transform-the-canvas-using-dommatrix
https://www.javascripture.com/DOMMatrix
https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix/DOMMatrix
https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix
https://developer.mozilla.org/en-US/docs/Web/API/DOMPoint
https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrixReadOnly/translate
document.addEventListener("DOMContentLoaded", function() {
let img = document.querySelector('.fertezj img');
document.querySelectorAll('.fertezj').forEach(el => {
let _startX, _startY, _scrollLeft, _scrollTop, max_width, max_height, min_width, min_height;
const mat = new DOMMatrix();
const pointerHandler = (event) => {
const {
screenX,
screenY
} = event;
let imgRect = img.getBoundingClientRect();
let elRect = el.getBoundingClientRect();
if (event.type === "pointerdown") {
document.addEventListener("pointermove", pointerHandler);
document.addEventListener("pointerup", pointerHandler);
_startX = screenX;
_startY = screenY;
_scrollLeft = imgRect.left - elRect.left;
_scrollTop = imgRect.top - elRect.top;
}
if (event.type === "pointerup") {
document.removeEventListener("pointermove", pointerHandler);
document.removeEventListener("pointerup", pointerHandler);
}
if (event.type === "pointermove") {
const dx = _scrollLeft + (screenX - _startX);
const dy = _scrollTop + (screenY - _startY);
if (dx <= 0 && dx >= (elRect.width - imgRect.width)) mat.e = dx;
if (dy <= 0 && dy >= (elRect.height - imgRect.height)) mat.f = dy;
document.querySelector('.fertezj img').style.transform = mat.toString();
document.querySelector('#raz').innerHTML = "";
}
event.preventDefault();
}
el.addEventListener("pointerdown", pointerHandler);
})
});
