JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>It is said that</li>
<li>your life flashes before</li>
<li>your eyes just before you die.</li>
<li>That is true, it's called Life.</li>
</ul>
CSS
body {
padding: 100px;
}
li {
-moz-user-select: none;
}
.selected {
background: #c00;
}
JavaScript
$(document).ready(function() {
$('ul').multiSelect({
unselectOn: 'body',
keepSelection: false,
});
});
/**
jQuery multiSelect plugin.
(c) Kane Cohen - Dec, 2011.
**/
$.fn.multiSelect = function(o) {
var defaults = {
multiselect: true,
selected: 'selected',
filter: ' > *',
unselectOn: false,
keepSelection: true,
list: $(this).selector,
e: null,
element: null,
start: false,
stop: false,
unselecting: false
}
return this.each(function(k,v) {
var options = $.extend({}, defaults, o || {});
// selector - parent, assign listener to children only
$(document).on('mousedown', options.list+options.filter, function(e) {
if (e.which == 1){
if (options.handle != undefined && !$(e.target).is(options.handle)) {
// TODO:
// keep propagation?
// return true;
}
options.e = e;
options.element = $(this);
multiSelect(options);
}
return true;
});
if (options.unselectOn) {
// event to unselect
$(document).on('mousedown', options.unselectOn, function(e) {
if (!$(e.target).parents().is(options.list) && e.which != 3) {
$(options.list+' .'+options.selected).removeClass(options.selected);
if (options.unselecting != false) {
options.unselecting();
}
}
});
}
});
}
function multiSelect(o) {
var target = o.e.target;
var element = o.element;
var list = o.list;
if ($(element).hasClass('ui-sortable-helper')) {
return false;
}
if (o.start != false) {
var start = o.start(o.e, $(element));
...