Как поставить ограничение на данный позицию X?

70
23 ноября 2021, 09:10

Есть такой код

$(document.body).on("mousemove", function(event) {
      if ($dragging) {
          var left = $('#panor-move').css('left')
          left = parseFloat(left)
          $dragging.offset({
              left: event.pageX
          });
      }
  });

  $(document.body).on("mousedown", "#panor-move", function (event) {
      $dragging = $(event.target);
  });
  $(document.body).on("mouseup", function (event) {
      $dragging = null;
  });

Который двигает по оси X. Можно ли сделать что бы left был максимальным 370 а минимальным 10?

Answer 1

Для того чтобы ограничить положение, достаточно добавить соответствующие проверки, перед вызовом $dragging.offset({, например:

if ($dragging) {
    var left = $('#panor-move').css('left');
    left = parseFloat(left);
    if(left < 10) left = 10; // если передвинули левее, устанавливаем в крайнюю левую точку
    if(left > 370) left = 370; // если передвинули правее, устанавливаем в крайнюю правую точку
    $dragging.offset({
        left: event.pageX
    });
}
READ ALSO
vue-nuxt проект с несколькими index.html

vue-nuxt проект с несколькими index.html

Как организовать проект с несколькими точками входа? Чтоб собирались 2 сборки с общими компонентами

65
Как выполнить Node.js код на HTML странице?

Как выполнить Node.js код на HTML странице?

Я создаю веб-приложение на electron и nodejs

149
Почему counter не инкрементируется?

Почему counter не инкрементируется?

Почему в данной конструкции counter не инкрементируется?

172
Пересборка webpack при добавлении .html файла в runtime

Пересборка webpack при добавлении .html файла в runtime

Добрых времени суток, проблема, есть webpack config, всё работает как нужно, за исключением одного но, когда в рантайме (при зпущенном локальном сервере)...

206