Для того чтобы реализовать перемещение элемента мышкой так, чтобы он сохранял ту область, на которой был кликнут, вам нужно учитывать смещение между курсором и точкой, где вы кликнули на элементе. Вот пошаговое решение:
1. Определите координаты курсора мыши в момент клика.
2. Определите координаты элемента при клике.
3. Вычислите смещение между курсором и элементом.
4. На каждом перемещении мыши обновляйте позицию элемента, используя это смещение.
Вот пример реализации на JavaScript:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Перетаскивание</title>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="draggable"></div>
<script>
const draggable = document.getElementById('draggable');
let offsetX, offsetY;
draggable.addEventListener('mousedown', function(e) {
// Вычисляем смещение при клике
offsetX = e.clientX - draggable.getBoundingClientRect().left;
offsetY = e.clientY - draggable.getBoundingClientRect().top;
// Добавляем обработчики событий для перемещения
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
});
function mouseMoveHandler(e) {
// Перемещаем элемент, сохраняя смещение
draggable.style.left = e.clientX - offsetX + 'px';
draggable.style.top = e.clientY - offsetY + 'px';
}
function mouseUpHandler() {
// Убираем обработчики событий при отпускании кнопки мыши
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
}
</script>
</body>
</html>
```
### Объяснение кода:
1. **mousedown** - При клике на элемент мы сохраняем смещение `offsetX` и `offsetY`, которое определяет, как далеко курсор находится от левого верхнего угла элемента.
2. **mousemove** - При перемещении мыши мы обновляем позицию элемента, вычитая смещения из текущих координат курсора, чтобы элемент перемещался именно от того места, где был клик.
3. **mouseup** - При отпускании кнопки мыши мы убираем обработчики событий `mousemove` и `mouseup`, чтобы предотвратить дальнейшее перемещение элемента.
Такой подход позволяет перемещать элемент, сохраняя точку клика относительно его позиции.