ползунок слайдера, drag and drop

390
25 июля 2022, 20:00

Сделал такой ползунок для слайдера:

const sliderPoint = document.querySelector('.slider_point');
const slider = document.querySelector('.slider');
sliderPoint.addEventListener('mousedown', (e) => {
  const shiftX = e.clientX - sliderPoint.getBoundingClientRect().left;
  moveAt(e.pageX);
  function moveAt(pageX) {
    sliderPoint.style.transform = `translateX(${pageX - shiftX}px)`;
  }
  function onMouseMove(event) {
    const sliderRightMax = slider.getBoundingClientRect().right;
    const sliderLeftMax = slider.getBoundingClientRect().left;
    const sliderPointRightPos = sliderPoint.getBoundingClientRect().right;
    const sliderPointLeftPos = sliderPoint.getBoundingClientRect().left;
    const movementOutRight = (sliderPointRightPos - event.pageX - sliderPoint.offsetWidth + shiftX) < 0 ? true : false;
    const movementOutLeft = (sliderPointLeftPos + event.pageX - sliderPoint.offsetWidth + shiftX) < 0 ? true : false;
    if (sliderPointRightPos >= sliderRightMax) {
      sliderPoint.style.transform = `translateX(${sliderRightMax - sliderPoint.offsetWidth}px)`;
      if (movementOutRight) {
        // console.log('Движение в правой части на правом краю слайдера');
      } else {
        // console.log('Движение в левой части на левом краю слайдера');
        moveAt(event.pageX);
      }
      return false;
    }
    if (sliderPointLeftPos <= sliderLeftMax) {
      sliderPoint.style.transform = `translateX(${0}px)`;
      if (movementOutLeft) {
        // console.log('Движение в левой части на левом краю слайдера');
      } else {
        // console.log('Движение в правой части на правом краю слайдера');
        moveAt(event.pageX);
      }
      return false;
    }
    // console.log(' ');
    moveAt(event.pageX);
  }
  document.addEventListener('mousemove', onMouseMove);
  document.onmouseup = function() {
    document.removeEventListener('mousemove', onMouseMove);
    document.onmouseup = null;
  };

});
sliderPoint.ondragstart = function() {
  return false;
};
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.slider {
  position: relative;
  width: 500px;
  height: 30px;
  background: black;
  overflow: hidden;
}
.slider_point {
  position: absolute;
  width: 30px;
  height: 30px;
  background: red;
}
<div class="slider">
  <div class="slider_point"></div>
</div>

Но если я сделаю своему контейнеру со слайдером отступ/отцентрирую как-то, то ползунок смещается на то расстояние, как смещен контейнер.

const sliderPoint = document.querySelector('.slider_point');
const slider = document.querySelector('.slider');
sliderPoint.addEventListener('mousedown', (e) => {
  const shiftX = e.clientX - sliderPoint.getBoundingClientRect().left;
  moveAt(e.pageX);
  function moveAt(pageX) {
    sliderPoint.style.transform = `translateX(${pageX - shiftX}px)`;
  }
  function onMouseMove(event) {
    const sliderRightMax = slider.getBoundingClientRect().right;
    const sliderLeftMax = slider.getBoundingClientRect().left;
    const sliderPointRightPos = sliderPoint.getBoundingClientRect().right;
    const sliderPointLeftPos = sliderPoint.getBoundingClientRect().left;
    const movementOutRight = (sliderPointRightPos - event.pageX - sliderPoint.offsetWidth + shiftX) < 0 ? true : false;
    const movementOutLeft = (sliderPointLeftPos + event.pageX - sliderPoint.offsetWidth + shiftX) < 0 ? true : false;
    if (sliderPointRightPos >= sliderRightMax) {
      sliderPoint.style.transform = `translateX(${sliderRightMax - sliderPoint.offsetWidth}px)`;
      if (movementOutRight) {
        // console.log('Движение в правой части на правом краю слайдера');
      } else {
        // console.log('Движение в левой части на левом краю слайдера');
        moveAt(event.pageX);
      }
      return false;
    }
    if (sliderPointLeftPos <= sliderLeftMax) {
      sliderPoint.style.transform = `translateX(${0}px)`;
      if (movementOutLeft) {
        // console.log('Движение в левой части на левом краю слайдера');
      } else {
        // console.log('Движение в правой части на правом краю слайдера');
        moveAt(event.pageX);
      }
      return false;
    }
    // console.log(' ');
    moveAt(event.pageX);
  }
  document.addEventListener('mousemove', onMouseMove);
  document.onmouseup = function() {
    document.removeEventListener('mousemove', onMouseMove);
    document.onmouseup = null;
  };

});
sliderPoint.ondragstart = function() {
  return false;
};
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.slider {
  position: relative;
  width: 500px;
  height: 30px;
  background: black;
  overflow: hidden;
  margin: 0 auto;
}
.slider_point {
  position: absolute;
  width: 30px;
  height: 30px;
  background: red;
}
<div class="slider">
  <div class="slider_point"></div>
</div>

Подскажите как исправить, в чём проблема

Answer 1

Как-то так решил (не спрашивайте как я это сделал, сам не понимаю)

const sliderPoint = document.querySelector('.slider_point');
const slider = document.querySelector('.slider');
sliderPoint.addEventListener('mousedown', (e) => {
  const shiftX = e.clientX - sliderPoint.getBoundingClientRect().left;
  onMouseMove(e);
  function moveAt(pageX) {
    // console.log(pageX);
    const sliderLeftMax = slider.getBoundingClientRect().left;
    sliderPoint.style.transform = `translateX(${pageX - sliderLeftMax - shiftX}px)`;
  }
  function onMouseMove(event) {
    const sliderRightMax = slider.getBoundingClientRect().right;
    const sliderLeftMax = slider.getBoundingClientRect().left;
    const sliderPointRightPos = sliderPoint.getBoundingClientRect().right;
    const sliderPointLeftPos = sliderPoint.getBoundingClientRect().left;
    const movementOutRight = (sliderPointRightPos - event.pageX - sliderPoint.offsetWidth + shiftX) < 0 ? true : false;
    const movementOutLeft = (-sliderPointLeftPos + event.pageX - sliderPoint.offsetWidth - shiftX) < 0 ? true : false;
    if (sliderPointRightPos >= sliderRightMax) {
      sliderPoint.style.transform = `translateX(${slider.offsetWidth - sliderPoint.offsetWidth}px)`;
      if (movementOutRight) {
        // console.log('Движение в правой части на правом краю слайдера');
      } else {
        // console.log('Движение в левой части на правом краю слайдера');
        moveAt(event.pageX);
      }
      return false;
    }
    if (sliderPointLeftPos <= sliderLeftMax) {
      sliderPoint.style.transform = `translateX(${0}px)`;
      if (movementOutLeft) {
        // console.log('Движение в левой части на левом краю слайдера');
      } else {
        // console.log('Движение в правой части на левом краю слайдера');
        moveAt(event.pageX);
      }
      return false;
    }
    // console.log(' ');
    moveAt(event.pageX);
  }
  document.addEventListener('mousemove', onMouseMove);
  removeMouseUp();
  function removeMouseUp() {
    document.onmouseup = function() {
      document.removeEventListener('mousemove', onMouseMove);
      document.onmouseup = null;
    };
  }
});
sliderPoint.ondragstart = function() {
  return false;
};
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.slider {
  position: relative;
  width: 500px;
  height: 30px;
  background: black;
  overflow: hidden;
  margin: 0 auto;
}
.slider_point {
  position: absolute;
  width: 30px;
  height: 100%;
  background: red;
}
<div class="slider">
  <div class="slider_point"></div>
</div>

READ ALSO
RSA шифрование по Modulus и Exp с node-rsa
javascript

RSA шифрование по Modulus и Exp с node-rsa

Делаю авторизацию на сайте, пароль шифруется публичным RSA mod+e

 325
Не подключается jQuery к сайту
javascript

Не подключается jQuery к сайту

Пытаюсь подключить jQuery к html сайтуПодключаю google CDN

 306
Подождать выполнение запроса sqlite на node.js
javascript

Подождать выполнение запроса sqlite на node.js

Хочу чтобы результатом выполнения функции был массив массивов с объектами, которые получены из БД

 327
Запуск jar архива двойным щелчком JDK 14, WIN 10
Java

Запуск jar архива двойным щелчком JDK 14, WIN 10

Я только начал изучать создание исполняемого jar архива из командной строкиС помощью команды jar создал файл app

 323