JSFiddle - React, Tailwind, and code Playground

by Sukanya Halder

HTML

<div class="container">
    <div id="div1">
    <p class="selectable">lorem</p>
    <p class="selectable">ipsum</p>
    </div>
    <div id="div2">
    <p class="selectable">dolor</p>
    <p class="selectable">sit</p>
    <p class="selectable">amet</p>
    </div>
</div>

CSS

.selected {background:red;}
#container{
    user-select: none; /* CSS3 (little to no support) */
-ms-user-select: none; /* IE 10+ */
-moz-user-select: none; /* Gecko (Firefox) */
-webkit-user-select: none; /* Webkit (Safari, Chrome) */
}

JavaScript

var $lastSelected = [],
	container     = $('.container'),
	collection    = $('.selectable');

container.on('click', '.selectable', function(e) {
	var that = $(this),
		$selected,
		direction;

	if (e.shiftKey){

		if ($lastSelected.length > 0) {
			 
			if(that[0] == $lastSelected[0]) {
				// The user has clicked on the same item, so do nothing.
				// Remember, `that` is our event target
				// You could also make this deselect everything except for this item
                if(that.hasClass('selected')) that.removeClass('selected');
				return false;
			}           
            
            if(that.hasClass('selected')) that.removeClass('selected');
			else that.addClass('selected');     
            
            $lastSelected = that;
			           
		} else {            
			$lastSelected = that;			
			that.addClass('lastSelected');			
			that.addClass('selected');
		}

	} else {
		// Not a shift select, so we'll just mark the target item
		$lastSelected = that;
		collection.removeClass('lastSelected selected');
		that.addClass('lastSelected selected');
   }
});