Как мне предотвратить выход моего движущегося div за пределы страницы/экрана в jquery?

Это то, что я пробовал, но оно продолжает выходить за пределы страницы/экрана.

$(document).ready(() => {
  $(document).on('keydown', function(e) {
    var key = e.which;
    if (key === 37) {
      $('#divResult').animate({
        left: "-=50"
      })
    }
    if (key === 38) {
      $('#divResult').animate({
        top: "-=50"
      })
    }
    if (key === 39) {
      $('#divResult').animate({
        left: "+=50"
      })
    }
    if (key === 40) {
      $('#divResult').animate({
        top: "+=50"
      })
    }
  })
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id = "divResult"></div>

Как предотвратить выход движущегося div за пределы страницы/экрана в jquery?

javascript html jquery css

18.03.2024 16:11

Поведение ключевого слова "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).width() и $(window).height() относительно позиции div, также я бы посоветовал вам использовать event.Key, потому что собственный event.which (а не jQuery) устарел.

let animationInProgress = false;
const debounceTime = 100; // milliseconds to debounce

$(document).on('keydown', (e) => {
  if (animationInProgress) return;
  animationInProgress = true;
  setTimeout(() => {
    animationInProgress = false;
  }, debounceTime);

  const key = e.key;
  const $divResult = $('#divResult');
  const currentPosition = $divResult.position();
  const pageWidth = $(window).width();
  const pageHeight = $(window).height();
  const divWidth = $divResult.width();
  const divHeight = $divResult.height();
  const step = 50 // whatever value you want here - you had 50 in your example;

  let newLeft, newTop;

  if (key === "ArrowLeft" && currentPosition.left > 0) {
    newLeft = Math.max(currentPosition.left - step, 0);
    $divResult.animate({
      left: newLeft
    });
  }
  if (key === "ArrowUp" && currentPosition.top > 0) {
    newTop = Math.max(currentPosition.top - step, 0);
    $divResult.animate({
      top: newTop
    });
  }
  if (key === "ArrowRight" && currentPosition.left + divWidth < pageWidth) {
    newLeft = Math.min(currentPosition.left + step, pageWidth - divWidth);
    $divResult.animate({
      left: newLeft
    });
  }
  if (key === "ArrowDown" && currentPosition.top + divHeight < pageHeight) {
    newTop = Math.min(currentPosition.top + step, pageHeight - divHeight);
    $divResult.animate({
      top: newTop
    });
  }
});

#divResult {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id = "divResult"></div>

спасибо за ответ, это не работает, окно прыгает в правильное положение, если нажать стрелку вправо. Кроме того, окно по-прежнему исчезает с экрана, если оно не в верхнем левом углу. И после пары раз переезда я больше не могу его двигать.

— 18.03.2024 17:04

ничего из того, что вы сказали, не происходит в моем фрагменте. Я даже отредактировал его, чтобы оно начиналось по центру (почти), а не сверху/слева.

— 19.03.2024 10:44

есть ли способ использовать мой первый фрагмент выше и написать меньше кода для достижения той же цели? ваш код хорош, не поймите меня неправильно, но это так много кода, и мой написанный код полностью исчез.

— 19.03.2024 12:19

18.03.2024 16:41