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

Question

[DeniSidorenko]

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

$(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

[Пашенька]

Конечно можно.

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


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

  $(document.body).on("mouseup", function (event) {
      $dragging = null;
  });

Comments

[DeniSidorenko]

Тут скорее надо для event.pageX, ибо left тут работает как свойство css

[Пашенька]

DeniSidorenko, я понял и поправил.

Answer 2

[Алексей Уколов]

Math.min()
Math.max()

Answer 3

[RAX7]

const clamp = (n, min, max) => Math.max(min, Math.min(n, max));

clamp(140, 10, 370); // -> 140
clamp(0, 10, 370); // -> 10
clamp(420, 10, 370); // -> 370