Создаю квадрат 100х100 и позиционирую его с помощью css left: 100px, top: 100px.
Далее я пытаюсь сдвинуть его на 10px по обеим осям, но уже при помощи translate
из js. И на мое удивление он не перемещается в (110, 110), а сдвигается на 110px x 110px.
Почему так? Почему матрица не работает так как она должна работать?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rect</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
html {
margin: 0;
padding: 0;
}
body {
background: whitesmoke;
}
.main-container {
width: 100vw;
height: 100vh;
background: dimgrey;
position: relative;
}
.container {
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
background: lightpink;
position: absolute;
}
</style>
</head>
<body>
<div class="main-container">
<div class="container">
</div>
</div>
<script>
var dragVO = {
element: document.querySelector('.container'),
touchOffset: {x: NaN, y: NaN}
}
dragVO.element.addEventListener('mousedown', element_mouseDownHandler);
function element_mouseDownHandler(event){
dragVO.element.removeEventListener('mousedown', element_mouseDownHandler);
document.addEventListener('mouseup', document_mouseUpHandler);
document.addEventListener('mousemove', document_mouseMoveHandler);
var dragElementClientRect = dragVO.element.getBoundingClientRect();
dragVO.touchOffset.x = event.clientX - dragElementClientRect.left;
dragVO.touchOffset.y = event.clientY - dragElementClientRect.top;
console.log('====== start drag =====');
console.log(dragElementClientRect);
console.log(event.clientX, event.clientY);
console.log(dragVO.touchOffset);
console.log('====== end start drag =====');
}
function document_mouseUpHandler(event){
document.removeEventListener('mouseup', document_mouseUpHandler);
document.removeEventListener('mousemove', document_mouseMoveHandler);
dragVO.element.addEventListener('mousedown', element_mouseDownHandler);
}
function document_mouseMoveHandler(event){
console.log(
event.clientX - dragVO.touchOffset.x,
event.clientY - dragVO.touchOffset.y
);
Object.assign(dragVO.element.style, {
transform: `translate(
${event.clientX - dragVO.touchOffset.x}px,
${event.clientY - dragVO.touchOffset.y}px
)`
})
}
</script>
</body>
</html>
Простой
