Как выбрать и отменить выбор элементов списка на основе области выбора

Question

Я хочу выбрать и отменить выбор элемента списка на основе области выбора, которая представляется пунктирной линией.

Вопрос: если пунктирная линия области выбора касается элемента списка, это должно быть выбрано, если отсоединено, его следует отменить.

Для понимания я сослался https://jqueryui.com/selectable/ и его код здесь https://raw.githubusercontent.com/jquery/jquery-ui/master/ui/widgets/selectable.js

Но я мало что понял !!

вот что я попробовал:

Нажмите, удерживайте и перетащите область выбора, чтобы увидеть вопрос

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

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;
  var elemRect = document.getElementById('selectionArea').getBoundingClientRect();
  // console.log(elemRect);
  var elem = document.elementFromPoint(x2, y2);
  // var isSelectedList = elem.classList.value.split(" ");
  // if(isSelectedList.indexOf('selected') > -1){
  //       elem.classList.remove('selected');
  // }else{
  //     elem.classList.add('selected');
  // }
  // console.log('elem',elem);

  var offset = {};
  offset.left = elem.left;
  offset.right = elem.left;
  offset.top = elem.top;
  offset.bottom = elem.top;

  // if ( options.tolerance === "touch" ) {
  hit = (!(offset.left > x2 || offset.right < x1 || offset.top > y2 ||
    offset.bottom < y1));

  //  console.log('hitttttt',hit);


  var x = document.getElementById("selectionArea");
  if (window.getComputedStyle(x).display != "none") {
    /*  if(hit){
           elem.classList.add('selected');  
       }else{
           elem.classList.remove('selected');
       }  */
  }

  reCalc();
};
onmouseup = function(e) {

  div.hidden = 1;
};

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

.selected {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="selectionArea" hidden></div>
<ul id="list_item">
  <li id="1">Hello 1</li>
  <li id="2">Hello 2</li>
  <li id="3">Hello 3</li>
  <li id="4">Hello 4</li>
  <li id="5">Hello 5</li>
  <li id="6">Hello 6</li>
  <li id="7">Hello 7</li>
  <li id="8">Hello 8</li>
  <li id="9">Hello 9</li>
  <li id="10">Hello 10</li>
  <li id="11">Hello 11</li>
  <li id="12">Hello 12</li>
  <li id="13">Hello 13</li>
  <li id="14">Hello 14</li>
  <li id="15">Hello 15</li>
  <li id="16">Hello 16</li>
  <li id="17">Hello 17</li>
  <li id="18">Hello 18</li>
  <li id="19">Hello 19</li>
  <li id="20">Hello 20</li>
  <li id="21">Hello 21</li>
  <li id="22">Hello 22</li>
  <li id="23">Hello 23</li>
  <li id="24">Hello 24</li>
  <li id="25">Hello 25</li>
  <li id="26">Hello 26</li>
  <li id="27">Hello 27</li>
  <li id="28">Hello 28</li>
  <li id="29">Hello 29</li>
  <li id="30">Hello 30</li>
  <li id="31">Hello 31</li>
  <li id="32">Hello 32</li>
  <li id="33">Hello 33</li>
  <li id="34">Hello 34</li>
  <li id="35">Hello 35</li>
  <li id="36">Hello 36</li>
  <li id="37">Hello 37</li>
  <li id="38">Hello 38</li>
  <li id="39">Hello 39</li>
  <li id="40">Hello 40</li>
  <li id="41">Hello 41</li>
  <li id="42">Hello 42</li>
  <li id="43">Hello 43</li>
  <li id="44">Hello 44</li>
  <li id="45">Hello 45</li>
  <li id="46">Hello 46</li>
  <li id="47">Hello 47</li>
  <li id="48">Hello 48</li>
  <li id="49">Hello 49</li>
  <li id="50">Hello 50</li>
</ul>

Надеюсь, мой вопрос имел для вас какой-то смысл.

Заранее спасибо !!