jqueryjquery-uiselecttext-editorjquery-ui-selectable

Plugin for jQuery Text-editor style selection?


What I'm trying to achieve is to use jQuery to mimic the behavior of the text-selection functionality you see in a typical text-editor, except instead of selecting text, I want to select multiple rows of <div>s. However, so far the only "selection" plugins I've found for jQuery operate based on a rectangular lasso model. In particular, I'm using the jQueryUI selectable plugin. To see what I'm talking about, consider the following 2 images:

Default jQueryUI "selectable" plugin behavior

Ideal plugin behavior (sans the lasso) http://img709.imageshack.us/img709/5664/selectableidealthumb.png

You can also go here to play with this exact example. Does anybody know of a plugin that achieves this? That would save me from proceeding to hack or hack around this plugin to get what I want...

P/S: In my app each row will contain up to 150 or so divs, and each div will have a few divs within it. I have tried hand-rolling my own selectable but it was slow even when dealing with just a single line. I'm currently using this plugin because its much more performant than what I wrote.


Solution

  • 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.