Ограничить выбор области / прямоугольника ограниченной областью в javascript - PullRequest
Новая
       9

Ограничить выбор области / прямоугольника ограниченной областью в javascript

0 голосов
/ 18 апреля 2020

Мне нужно выбрать область внутри другой области с помощью мыши, но у меня возникают проблемы со смещением, когда я устанавливаю поле для области, содержащей выделение.

Я не совсем уверен, почему это происходит, как мне исправить это поведение? 

var div = document.getElementById('selection'),
  x1 = 0,
  y1 = 0,
  x2 = 0,
  y2 = 0;

function reCalc() {
  var x3 = Math.min(x1, x2);
  var x4 = Math.max(x1, x2);
  var y3 = Math.min(y1, y2);
  var y4 = Math.max(y1, y2);
  div.style.left = x3 + 'px';
  div.style.top = y3 + 'px';
  div.style.width = x4 - x3 + 'px';
  div.style.height = y4 - y3 + 'px';
}
onmousedown = function(e) {
  div.hidden = 0;
  x1 = e.clientX;
  y1 = e.clientY;
  reCalc();
};
onmousemove = function(e) {
  x2 = e.clientX;
  y2 = e.clientY;
  reCalc();
};
onmouseup = function(e) {
  div.hidden = 1;
};
#selection {
  border: 1px dotted #000;
  position: absolute;
  background-color: teal;
  opacity: 0.5;
  margin: 0px 0px;
}

#div {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  background-color: yellow;
  margin: 50px;
}
<div id="div">

  <div id="selection" hidden></div>
</div>
...