[destus]

Код легко оптимизируется, однако лень.

<div id='box'>
  <div id='e1' class='el'>1</div>
  <div class='el'>2</div>
  <div class='el'>3</div>
  <div class='el'>4</div>
  <div class='el'>5</div>
  <div class='el'>6</div>
  <div class='el'>7</div>
  <div class='el'>8</div>
  <div class='el'>9</div>
  <div class='el'>X</div>
</div>
<style>
  body {
    display: flex;
    margin: 0;
    height: 100vh;
    background: #56bddc;
  }
  #box {
    display: flex;
    margin: auto;
    box-shadow: 0 0 5px hsla(0, 0%, 0%, .25);
  }
  .el {
    width: 60px;
    line-height: 60px;
    font-family: consolas;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
  }
  .mark { background: #fece9a; }
  .blue { background: blue;  }
</style>

<script>
	
	var CSSClass = {};
	CSSClass.is = function(e,c){
		var classes = e.className;
		return e.className.search("\\b" + c +"\\b") != -1;
	}
	CSSClass.add = function(e,c)
	{
		if (CSSClass.is(e,c)) return;
		if (e.className) c = ' ' + c;
		e.className += c;	
	}
	CSSClass.remove = function(e,c)
	{
		e.className = e.className.replace(new RegExp("\\b" + c+"\\b\\s*", "g"), '');	
	}
	
	function positionChild(node)
	{
		var pos = 1;
		for (var x = node.parentNode.firstChild; x != null; x = x.nextSibling, pos++  )
		{
			if ( x.id == node.id && x.nodeType == 1 ) { return pos; break; }	
		}
	}
		
	function byPass(startDiv,endDiv)
	{
		for ( var x = startDiv; x != endDiv.nextSibling  ;  x = x.nextSibling )
		{
			CSSClass.add(x,'mark');
			CSSClass.remove(x,'blue');
		}		
	}
	
	function init()
	{
		var div = document.getElementById('box');
		for (var x = div.firstChild; x != null; x = x.nextSibling)
		{
			x.className = 'el';	
			x.id = '';
		}
	}
	
	function stopped()
	{
		start = false;
		end = true;	
	}
	
	
	var start, end;
	var startDiv, endDiv;
	
	document.getElementById('box').onclick = function(e){
		var e = e || event;
		var target = e.target;
		if (!start) 
		{
			init(); 
			start = true; 
			end = false; 
			target.id = 'start';
			CSSClass.add(target,'mark');
			startDiv = document.getElementById('start');
		} 
		else
		{
			var startChildPosition, endChildPosition;
			if (!end) 
			{ 
				end = true;
				if (target.id == 'start')
				{
					CSSClass.add(target, 'mark');
				}
				else
				{ 
					target.id = 'end';
					startDiv = document.getElementById('start');
					endDiv = document.getElementById('end');
					startChildPosition = positionChild(startDiv);
					endChildPosition = positionChild(endDiv);
					if (startChildPosition < endChildPosition) byPass(startDiv,endDiv);
					else byPass(endDiv,startDiv);
				}
			} 
			 
		stopped();
		}
	}
	
	document.getElementById('box').onmouseover = function(e){
		var e = e || event;	
		var target = e.target;
		if (start)
		{
			if (target.id != 'start')
			{ 
				target.id = 'currNode';
				if ( positionChild(target) > positionChild(startDiv) )
				{
					for (var x = startDiv.nextSibling; x != target.nextSibling; x = x.nextSibling)
					{
						CSSClass.add(x,'blue');	
					}
				}
				else
				{
					for (var x = startDiv.previousSibling; x != target.previousSibling; 
						x = x.previousSibling)
					{
						CSSClass.add(x,'blue');	
					}	
				}
				target.id = '';
			}
		}
	}
	document.getElementById('box').onmouseout = function(e){
		var e = e || event;	
		var target = e.target;
		if (start && !end)
		{
                    for (var x = target.parentNode.firstChild; x != null; x = x.nextSibling)
				{
					if (x.id != 'start') CSSClass.remove(x,'blue');	
				}			
                    if (target.id != 'start')
			{ 
				if( CSSClass.is(target,'blue'))
				{
				 CSSClass.remove(target,'blue');
				}
			}
		}
	}

</script>