mouse rectangle-select elements

by Saran

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="div" hidden></div>
<ul id="list">
  <li>a</li>
  <li>b</li>
  <li style="color: red">c</li>
  <li>d</li>
  <li>e</li>
</ul>

CSS

#div {
  border: 1px dotted #000;
  position: absolute;
}

ul {
  position: absolute;
  left: 100px;
}
li {
  width: 20px;
  background-color: white;
  margin: 5px;
}

JavaScript

var div = document.getElementById('div'),
  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';
}

function rectangleSelect(selector) {
  var elements = [];
  var $sel = $(selector);
  //console.log($sel)
  $sel.each(function() {
    var $this = $(this);
    var offset = $this.offset();
    var x = offset.left;
    var y = offset.top;
    var w = $this.width();
    var h = $this.height();

    //console.log(x, y, w, h);
    //console.log(x1, y1, x2, y2);

    if (x >= x1 && y >= y1 && x + w <= x2 && y + h <= y2) {
      // this element fits inside the selection rectangle
      elements.push($this.get(0));
      console.log("added");
    }
  });
  return elements;
}

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;
  var elements = rectangleSelect("ul#list li");
  var itm = elements.length;
  while (itm--) {
    elements[itm].style.color = 'red';
    console.log(elements[itm]);
  }
};