0

let qu = document.getElementById('d2')
let div0 = document.getElementById('d1') //Обьявил для возможного использования 
qu.onmousedown = function(e) {
  qu.style.position = 'absolute';
  moveAt(e);
  qu.style.zIndex = 1000;

  function moveAt(e) {
    qu.style.left = e.pageX - qu.offsetWidth / 2 + 'px';
  }
  document.onmousemove = function(e) {
    moveAt(e);
  }
  qu.onmouseup = function() {
    document.onmousemove = null;
    qu.onmouseup = null;
  }
}
.d1 {
  width: 500px;
  height: 40px;
  background: black;
}

.d2 {
  height: 40px;
  width: 20px;
  background-color: rgb(72, 0, 50);
}
<div id="d1" class="d1">
  <div id="d2" class="d2">
  </div>
</div>

Как мне ограничить зону передвижения div2. Использовать костыли ограничивая body я не хочу. Адекватно составить условие тоже не получилось. Буду благодарен за любые советы)

0

1 ответ 1

0

let qu = document.getElementById('d2')
let div0 = document.getElementById('d1') //Обьявил для возможного использования 

qu.onmousedown = function(e) {
  qu.style.position = 'absolute';
  moveAt(e);
  qu.style.zIndex = 1000;

  function moveAt(e) {
    if (e.pageX <= div0.offsetLeft + div0.offsetWidth && e.pageX >= div0.offsetLeft) {
      qu.style.left = e.pageX - qu.offsetWidth / 2 + 'px';
    }
  }
  document.onmousemove = function(e) {
    moveAt(e);
  }
  qu.onmouseup = function() {
    document.onmousemove = null;
    qu.onmouseup = null;
  }
}
.d1 {
  width: 500px;
  height: 40px;
  background: black;
}

.d2 {
  height: 40px;
  width: 20px;
  background-color: rgb(72, 0, 50);
}
<div id="d1" class="d1">
  <div id="d2" class="d2">
  </div>
</div>

1
  • Большое спасибо!
    – Davq
    22 июн 2022 в 10:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.