Выделить интервал элементов (от a до b) двумя кликами

[Teamur]

Наверное так .

box.onmouseout = function() {
  el.classList.remove('blue');
  a.classList.add('blue');
}

[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>

[Teamur]

destus,
Спасибо за усилия. Спасибо за гиперскрипт. Пойду-ка пройдусь, надо положить за интернет...))))

[Teamur]

При выведении курсора за контейнер, вся синева исчезает кроме того элемента по которому кликнули первым, то есть, если нужно выделить интервал от 2 до 7, это значит что если кликнуть по 2-му элементу - он станет синим. Потом если сдвинуть курсор до элемента 7, находясь в контейнере, а затем спустить курсор вниз за пределы контейнера, синька должна исчезнуть со всего диапазона, кроме элемента 2, так как он был кликнут первым. Вот такая расшифровка у меня... )))))

[destus]

При выведении курсора за контейнер, вся синева исчезает кроме того элемента по которому кликнули первым, то есть, если нужно выделить интервал от 2 до 7, это значит что если кликнуть по 2-му элементу - он станет синим. Потом если сдвинуть курсор до элемента 7, находясь в контейнере, а затем спустить курсор вниз за пределы контейнера, синька должна исчезнуть со всего диапазона, кроме элемента 2, так как он был кликнут первым. Вот такая расшифровка у меня... )))))

Ну так это легко лечится. Запустите скрипт из моего поста выше.

[Teamur]

destus,
Во, то что надо! Вы всё правильно поняли. Молодец! )
Осталось одно лишь - сократить! Будем разбираться как работает.

[рони]

синька должна исчезнуть со всего диапазона, кроме элемента 2

что - то этого не наблюдаю

[Teamur]

Господа, давайте элементу a (первый кликнутый) присвоим например красный цвет, а конечному элементу b - зеленый. А сам интервал будет синим. К тому же в стилях можно будет задать любые цвета по желанию. Можно взять цвета помягче, чтобы не резало глаза. Начальный элемент выделения (a) - pink, конечный (b) - lightgreen, а промежуток - #ccc, например. Промежуток обзовем range.

Вешаем на детей контейнера box обработчики клика:

var el = document.querySelectorAll('.el');
for (var i = 0; i < el.length; i++) {
el[i].addEventListener('click', selectRange);
}

selectRange() {
var a, b, range;
1) Получить номер элемента a и записать его в переменную
2) Добавить обработчик наведения на элементы, а затем сразу же динамически получать номер элемента при наведении, записывать его в переменную b.
3) пройтись циклом from a to b
}

Вот что я знаю и могу на Javascript. Всё, ребята. Поэтому и сижу, жду ответа, как сказал рони.
Надеюсь что все закончится хорошо. ))))

[рони]

Teamur,
даёшь градиент!!!

[Teamur]

Эх была ни была, градиенты, тени, скругления.
А если серьезно, обойдемся и без них. Ведь простое всегда можно усложнить, а вот наоборот - невсегда...