Как выбрать диапазон блоков?

Question

[Sulin]

есть вот такой элемент:


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

суть работы во всплыв окне:
изначально ничего не выбрано.
при первом выборе(клике) становится активным выбранный пункт в списке и сверху в поле указывается первое значение.

при втором клике на другом элементе из списка он также выбирается и если между ними есть элементы то и они выбираются автоматически, а сверху в поле выводится значение min - max из выбранных.

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

функционал напоминает выбор диапазонов в календарях.

Может кто знает плагин который может такое на дивах сделать?

Answer 1

[Sulin]

В общем плагина я так и не нашел. набросал сам код на коленке. выглядит он конечно страшновато, да и я не особо в jquery то разбираюсь, поэтому если кто-то поучаствует в его облагораживании буду благодарен.

рабочий пример можно глянуть тут (пример в живую) Ссылка временная и пример там будет находит не долго.

сам код такой (по сути всё что он делает это даёт и убирает класс active нужным элементам, делает кучу проверок в if else и делает по сути однотипные записи в переменные ну и пишет в отдельный блок выбранный диапазон)
js:

var minIndex, maxIndex, minContent, maxContent;
$('.block_range .line').click(function(){
	var globParent = $(this).parents('.modal_cont');
	var parent = $(this).parents('.block_range');

	if(!$(this).hasClass('active')){
		if(parent.find('.line.active').size() == false){
			minIndex = $(this).index();
			minContent = $(this).attr('data-content');
			globParent.find('.from').text(minContent);
		}else if(parent.find('.line.active').size() == 1){
			if($(this).index() < minIndex){
				maxIndex = minIndex;
				minIndex = $(this).index();

				maxContent = minContent;
				minContent = $(this).attr('data-content');
				globParent.find('.from').text(minContent);
				globParent.find('.to').text(maxContent);
				parent.find('.line').slice(minIndex,maxIndex).addClass('active');
			}else{
				maxIndex = $(this).index();
				maxContent = $(this).attr('data-content');
				globParent.find('.to').text(maxContent);
				parent.find('.line').slice(minIndex,maxIndex).addClass('active');
			}
		}else if(parent.find('.line.active').size() > 1){
			if($(this).index() > maxIndex){
				maxIndex = $(this).index();
				maxContent = $(this).attr('data-content');
				globParent.find('.to').text(maxContent);
				parent.find('.line').slice(minIndex,maxIndex).addClass('active');
			}else if($(this).index() < minIndex){
				minIndex = $(this).index();
				minContent = $(this).attr('data-content');
				globParent.find('.from').text(minContent);
				parent.find('.line').slice(minIndex,maxIndex).addClass('active');
			}
		}

		$(this).addClass('active');
	}else{
		if($(this).index() < maxIndex && $(this).index() > minIndex){
			var minMinus = $(this).index()-minIndex;
			var maxMinus = maxIndex-$(this).index();

			if(minMinus < maxMinus){
				parent.find('.line').slice(minIndex,$(this).index()).removeClass('active');
				minIndex = $(this).index();
				minContent = $(this).attr('data-content');
				globParent.find('.from').text(minContent);
			}else{
				parent.find('.line').slice($(this).index()+1,maxIndex+1).removeClass('active');
				maxIndex = $(this).index();
				maxContent = $(this).attr('data-content');
				globParent.find('.to').text(maxContent);
			}
		}
	}
});

пример html

<div class="block_range">
	<div class="line" data-content="50">50</div>
	<div class="line" data-content="100">100</div>
	<div class="line" data-content="150">150</div>
	<div class="line" data-content="200">200</div>
	<div class="line" data-content="250">250</div>
	<div class="line" data-content="300">300</div>
	<div class="line" data-content="более">Более</div>
</div>