+2  A: 

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.

Harmen
Thanks for taking the time to write this! I will give it a try. However, I have tried my hand at writing something like this on my own and my app needs to be quite performant, as I've added in the "P/S" section of my question. Either way, I'll post back here with news on how it went.
Suan
A: 

Maybe you already got your own script for this, but I optimized and improved mine a lot. It adds or removes classes only when needed, which is great for performance.

Also it got some methods that may be useful:

var sR = $('#selectable').selectableRange({
    /* Alternatively, you could overwrite default options
    classname: 'active',
    log: false,
    logElement: $('#log'),
    nodename: 'LI'*/
});

// Initialize the selectable so it works
sR.init();

// You can always change options like this:
$('#logOnOff').click(function(){
    // Toggle log
    sR.options.log = (sR.options.log) ? false : true;
});

// Also you can use this methods:
// sR.deselect()
// sR.destroy()
// sR.getSelectedItems()

Give it a try, code is also availabe.

Harmen
I know its been a really long time, but I finally got the chance to play around with your code. I've modified it to something closer to my intended application and it works great, with the exception that its performance is horrible on IE8.Perhaps you could help on why it performs so poorly on IE? The code is at http://suanpublic.xtreemhost.com/so/selectable/ Click on "Add more items" 5-6 times and quickly select across multiple lines. Then note the difference between IE and other browsers.
Suan
I've discovered the big performance bottleneck in IE - it appears that .live() is VERY slow on elements that have been added after the page has loaded. I'm using the simple .bind() now, which makes it much better, albeit still noticeably slower than FF. Apart from that, your code helped a lot and I learned a lot from it. Thanks!
Suan
You're welcome :]
Harmen
A: 

I would make my own version using the jQuery features.

First of all, interface the event for "stop:" (perhaps like serialize http://jqueryui.com/demos/selectable/#serialize)

Then have a look at which ID's I got back, lowest and highest would give me enough for a simple "for...next" loop through the remaining objects.

I know its a fix/hack solution, but that seems to solve the problem from my point of view, is it usefull for you or do you need the code too? Just wanted to provide with the algoritmic thought first. :o)

BerggreenDK