javascript - 如何根据选择区域选择和取消选择列表项

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>

希望我的问题对你有意义。

提前致谢！！

标签： javascriptjqueryhtml