Блог

Главная - Вопросы по программированию - Перетаскиваемый элемент застревает вблизи краев

Перетаскиваемый элемент застревает вблизи краев

#javascript

#javascript

Вопрос:

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

Кстати, я не смог правильно перенести запоминаемую позицию в «updateDrag».

И нет, я не хочу никакого решения jQuery, подобного тому, которое создано с помощью jQuery UI.

 let $container = document.getElementById('container');
let $element = document.getElementById('element');
let mousePosition;
let offset = [0, 0];
let isDown = false;

function initDrag(event) {
  isDown = true;
  // Element also remembers previous position wrong
  // offset = [
  //     $element.offsetLeft - event.clientX,
  //     $element.offsetTop - event.clientY
  // ];
  offset = [
    0,
    0
  ];
}

function updateDrag(event) {
  event.preventDefault();
  if (isDown) {
    mousePosition = {
      x: event.clientX,
      y: event.clientY
    };
    let diffY = mousePosition.y - offset[1];
    let diffX = mousePosition.x - offset[0];

    if (diffY >= 0 amp;amp; diffY   $element.offsetHeight <= $container.offsetHeight) {
      $element.style.top = (mousePosition.y   offset[1])   'px';
    }
    if (diffX >= 0 amp;amp; diffX   $element.offsetWidth <= $container.offsetWidth) {
      $element.style.left = (mousePosition.x   offset[0])   'px';
    }
  }
}

function haltDrag() {
  isDown = false;
}

$element.addEventListener('mousedown', initDrag, false);
document.addEventListener('mouseup', haltDrag, false);
document.addEventListener('mousemove', updateDrag, false);  
 #container {
  position: relative;
  top: 10px;
  left: 10px;
  height: 300px;
  width: 300px;
  background-color: green;
}

#element {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: red;
  color: blue;
}  
 <div id="container">
  <div id="element"></div>
</div>

Комментарии:

1. Вы уверены, что этого не происходит, потому что указатель мыши больше не находится на элементе?

2. Вы имеете в виду эффект, при котором красный квадрат остается на небольшом расстоянии от края, даже если курсор мыши уже пересек границу? Это потому, что вы игнорируете события мыши за пределами зеленой области. Частота событий Mousemove ограничена; чем быстрее вы перемещаетесь, тем больше расстояние между местами, где запускается событие.

3. Ага, потерян контакт между «initDrag» и «updateDrag», поскольку прослушиватель «mousedown» прослушивает только элемент «$ element»? Если вы можете исправить это в ответе, то были бы очень признательны за повышение! Спасибо

4. Вы неправильно поняли; updateDrag прослушивается по всему документу. Проблема в ваших собственных if заявлениях; избавьтесь от них. Вместо этого используйте Math.min и Math.max , чтобы ограничить свободу перемещения красного прямоугольника.