JSFiddle - React, Tailwind, and code Playground

by Sergey Chistov

HTML

<div class="shifty">
  <ul>
    <li id='1'>1</li>
    <li id='2'>2</li>
    <li id='3'>3</li>
    <li id='4'>4</li>
    <li id='5'>5</li>
    <li id='6'>6</li>
    <li id='7'>7</li>
  </ul>
</div>

JavaScript

var keysPressed = [],
    elements2rm = [],
    lastClicked = -1,
    currClicked = -1,
    ctrlCode = 17;
    shiftCode = 16;

$(document).on("keyup keydown", function(e) {
    // console.log('e_', e);
    // console.log('target', e.target);
    switch(e.type) {
        case "keydown" :
            console.log('k_down');
            keysPressed.push(e.keyCode);
            break;
        case "keyup" :
            console.log('k_up');
            var idx = keysPressed.indexOf(e.keyCode);
            if (idx >= 0)
                keysPressed.splice(idx, 1);
            break;
    }
});

$("div.shifty").on("click", function(e) {
    function addHighlight(elem){ $(elem).css({'color': 'red'}); }
    function rmHighlight(elem){ $(elem).css({'color': 'black'}); }

    e.preventDefault();
    console.log('__e', e);
    if(isKeyPressed(shiftCode)){
      console.log('e__', e);
      elements2rm.forEach(rmHighlight);
      elements2rm = [];

      currClicked = e.target;
      var end = parseInt(currClicked.id, 10);
      var start = curr = parseInt(lastClicked.id, 10);
      if(start < end)
        for(; curr <= end ; ++curr)
          elements2rm.push($('li[id="' + curr +'"]'));
      else
        for(; curr >= end ; --curr)
          elements2rm.push($('li[id="' + curr +'"]'));

      elements2rm.forEach(addHighlight);
      
    }
    else if(isKeyPressed(ctrlCode)){
      lastClicked = currClicked = e.target;
      elements2rm.push(lastClicked);
      addHighlight(lastClicked);
    }
    else{
      elements2rm.forEach(rmHighlight);
      elements2rm = [];

      lastClicked = currClicked = e.target;

      addHighlight(lastClicked);
      elements2rm.push(lastClicked);
      console.log('elements2rm', elements2rm);
    }
});

function isKeyPressed(code) {
    return keysPressed.indexOf(code) >= 0;
}