Как корректно ограничить область Drag'n'Drop?

#javascript #drag_n_drop

Есть маленький div внутри большого div. Через JS применен Drag'n'Drop к малому div.
Необходимо ограничить область перемещения меньшего блока.

Попытка реализации

Но если попробовать резко переместить белый блок влево или вверх, то он "залипнет"
недалеко от границы. Как это исправить?



var small = document.getElementById('small');
small.onmousedown = function(e) {
  move(e);

  function move(e) {
    if (e.pageX > 0) {
      small.style.left = e.pageX + 'px';
    }
    if (e.pageY > 0) {
      small.style.top = e.pageY + 'px';
    }
  }
  document.onmousemove = function(e) {
    move(e);
  }
  small.onmouseup = function() {
    document.onmousemove = null;
    small.onmouseup = null
  }
}
#big {
  width: 12cm;
  height: 12cm;
  background-color: #DDDDDD;
}

#small {
  position: absolute;
  left: 0.75cm;
  top: 0.75cm;
  width: 4cm;
  height: 4cm;
  background-color: #FFFFFF;
}

  





    

Ответы

Ответ 1

Для правильного позиционирования small необходимо рассчитать координаты, за которые
нельзя этот small выпускать. Т.е. мы имеем четыре границы: верхнюю, нижнюю, левую, правую.

Для наглядности в примере добавлены отступы у big и фон у body.



var small = document.getElementById('small');
var big = document.getElementById('big');
//* флаг перетаскивания
var isDrag = false;
//* ограничения, за которые нельзя вытащить small
var limits = {
  top: big.offsetTop,
  right: big.offsetWidth + big.offsetLeft - small.offsetWidth,
  bottom: big.offsetHeight + big.offsetTop - small.offsetHeight,
  left: big.offsetLeft
};

//* вкл/выкл режим перетаскивания
small.onmousedown = function(e) {
  isDrag = true;
}
document.onmouseup = function() {
  isDrag = false;
}
document.onmousemove = function(e) {
  if (isDrag) {
    move(e);
  }
}

//* вычисление координат
function move(e) {
  var newLocation = {
    x: limits.left,
    y: limits.top
  };
  if (e.pageX > limits.right) {
    newLocation.x = limits.right;
  } else if (e.pageX > limits.left) {
    newLocation.x = e.pageX;
  }
  if (e.pageY > limits.bottom) {
    newLocation.y = limits.bottom;
  } else if (e.pageY > limits.top) {
    newLocation.y = e.pageY;
  }
  relocate(newLocation);
}

//* размещение small
function relocate(newLocation) {
  small.style.left = newLocation.x + 'px';
  small.style.top = newLocation.y + 'px';
}
body {
  background: #EEF;
}
#big {
  width: 12cm;
  height: 12cm;
  background-color: #DDDDDD;
  margin: 2cm;
}
#small {
  position: absolute;
  left: 2.75cm;
  top: 2.75cm;
  width: 4cm;
  height: 4cm;
  background-color: #FFFFFF;
}