Как установить ограничение на перемещение изображения?

Я создаю веб-сайт Карт, например Google Map. Я нашел способ перетащить изображение (div) для перемещения. Но я не хочу, чтобы это вышло за пределы экрана. Как только он выйдет за пределы, появится белый фон. Я хочу установить ограничение для изображения, чтобы, когда край изображения касается края окна, он не мог двигаться. Я не хочу, чтобы изображение хранилось внутри контейнера, потому что изображение больше, чем окно, и оно работает, перемещая изображение.

document.addEventListener('DOMContentLoaded', function() {
  let x = 0;
  let y = 0;

  const ele = document.getElementById('dragMe');

  const mouseDownHandler = function(e) {
    x = e.clientX;
    y = e.clientY;

    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
  };

  const mouseMoveHandler = function(e) {
    const dx = e.clientX - x;
    const dy = e.clientY - y;

    ele.style.top = `${ele.offsetTop + dy}px`;
    ele.style.left = `${ele.offsetLeft + dx}px`;

    x = e.clientX;
    y = e.clientY;
  };

  const mouseUpHandler = function() {
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
  };

  ele.addEventListener('mousedown', mouseDownHandler);
});

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  border: 1px solid #cbd5e0;
}

.draggable {
  cursor: pointer;
  position: absolute;
  user-select: none;
  align-items: center;
  display: flex;
  justify-content: center;
  border: 1px solid #cbd5e0;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <link rel = "stylesheet" href = "css.css">
  <script type = "text/javascript" src = "javascript.js"></script>
</head>

<body>

  <div class = "container">
    <div class = "draggable" id = "dragMe">
      <img src = "Texture/test map.png">
    </div>
  </div>

</body>

</html>

javascript html css

27.03.2024 04:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

По сути, вы будете вычислять новые верхние и левые значения на основе движения мыши, но при этом придется накладывать некоторые ограничения. window.innerWidth и window.innerHeight обозначают размеры экрана, а ele.offsetWidth и ele.offsetHeight сообщают, насколько велико ваше изображение. Используйте их, чтобы установить границы, где изображение не должно быть растянутым.

const mouseMoveHandler = function(e) {
  const dx = e.clientX - x;
  const dy = e.clientY - y;

  // Calculate the new position
  let newLeft = ele.offsetLeft + dx;
  let newTop = ele.offsetTop + dy;

  // Get the dimensions of the window and the image
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight;
  const imageWidth = ele.offsetWidth;
  const imageHeight = ele.offsetHeight;

  // Define the boundaries
  const leftBoundary = screenWidth - imageWidth;
  const topBoundary = screenHeight - imageHeight;

  // Constrain the new position
  newLeft = Math.min(Math.max(newLeft, leftBoundary), 0);
  newTop = Math.min(Math.max(newTop, topBoundary), 0);

  // Update the position of the element
  ele.style.left = `${newLeft}px`;
  ele.style.top = `${newTop}px`;

  // Update the starting point for the next movement
  x = e.clientX;
  y = e.clientY;

};

Вы можете использовать кнопку «Копировать фрагмент для ответа», чтобы интегрировать свою функцию с кодом ОП, если вы чувствуете милосердие.

— 27.03.2024 17:08

Что делать, если размер изображения меньше окна? Потому что МПа игрового мира не всегда больше окна. В этом случае изображение просто не перемещается вместе с вашим кодом.

— 28.03.2024 00:54

27.03.2024 05:19