Maybe this could be optimized somehow and yet I have tested it in Chrome only, but I think it will work in other browsers too. There is no need of jQuery UI for this, it's hand made ;)
$(function() {
var selectableLi = $('#selectable li');
selectableLi.mousedown(function(){
var startIndex, endIndex, mouseUpOnLi = false;
// When dragging starts, remove classes active and hover
selectableLi.removeClass('active hover');
// Give the element where dragging starts a class
$(this).addClass('active');
// Save the start index
startIndex = $(this).index();
// Bind mouse up event
selectableLi.bind('mouseup', function(){
// Mouse up is on a li-element
mouseUpOnLi = true;
$(this).addClass('active');
// Remove the events for mouseup, mouseover and mouseout
selectableLi.unbind('mouseup mouseover mouseout');
// Store the end index
endIndex = $(this).index();
// Swap values if endIndex < startindex
if(endIndex < startIndex){
var tmp = startIndex;
startIndex = endIndex;
endIndex = tmp;
}
// Give the selected elements a colour
for(i=startIndex; i<=endIndex; i++){
$(selectableLi[i]).addClass('active');
}
}).bind('mouseover', function(){
// Give elements a hover class when hovering
$(this).addClass('hover');
}).bind('mouseout', function(){
// Remove the hover class when mouse moves out the li
$(this).removeClass('hover');
});
$(document).bind('mouseup', function(e){
// When mouse up is outside a li-element
if(!mouseUpOnLi){
selectableLi.removeClass('active');
}
$(this).unbind('mouseup');
});
}).attr("unselectable","on").css("MozUserSelect","none").bind("selectstart",function(){return false});
});
I've got an example online. Note that items don't have a background colour when selecting; I think this will give a better performance.
UPDATE - Example 2
I updated it so the selection is visible while selecting:
var selectableLi;
function colourSelected(a, b, Class){
selectableLi.removeClass(Class);
// Swap values if a > b
if(a > b){
var tmp = a;
a = b;
b = tmp;
}
// Give the selected elements a colour
for(i=a; i<=b; i++){
$(selectableLi[i]).addClass(Class);
}
}
$(function() {
selectableLi = $('#selectable li');
selectableLi.mousedown(function(){
var startIndex, endIndex, mouseUpOnLi = false;
// When dragging starts, remove classes active and hover
selectableLi.removeClass('active hover');
// Give the element where dragging starts a class
$(this).addClass('active');
// Save the start index
startIndex = $(this).index();
// Bind mouse up event
selectableLi.bind('mouseup', function(){
// Mouse up is on a li-element
mouseUpOnLi = true;
$(this).addClass('active');
// Remove the events for mouseup, mouseover and mouseout
selectableLi.unbind('mouseup mouseover mouseout');
colourSelected(startIndex, $(this).index(), 'active');
}).bind('mouseover mouseout', function(){
// Give elements a hover class when hovering
colourSelected(startIndex, $(this).index(), 'hover');
});
$(document).bind('mouseup', function(e){
// When mouse up is outside a li-element
if(!mouseUpOnLi){
selectableLi.removeClass('active hover');
}
$(this).unbind('mouseup');
selectableLi.unbind('mouseover mouseout');
});
}).attr("unselectable","on").css("MozUserSelect","none").bind("selectstart",function(){return false});
});
Again, maybe this code could be optimized somehow for performance.