jQuery UI Selectable Without Selection Box

Question

Given this example here: http://jqueryui.com/selectable/#display-grid I would like to make a selection without the "selection box" that appears when you click 'n drag. Namely, when I click on number 5 and drag to number 6 and then to 10 I get this:

where in fact what i would like to is drag from 5 to 6 to 10 and have only them selected without 9.

I searched the docs and couldn't find that option, and my google skills didn't bring me any luck, and I thought this must have been already done it's just so happens I can't grasp it on my own or find an existing solution, so any help here is appreciated (not saying you should do the research for me, am just hoping someone dealt with this before so he can point me to the right direction).

It also could be I'm missing the point in trying to accomplish this with jquery UI but this was the first such example I found that fits (kind of) what I want to accomplish.

Answer 1

First, you might want to hide .ui-selectable-helper or change the CSS:

.ui-selectable-helper{display:none;}

Next, do something like this:

$(function() {
    var _mousedown = false;
    $('#selectable').selectable({
        start: function(event,ui){
            _mousedown=true;
        },
        stop: function(event,ui){
            _mousedown=false;
            $('.ui-selected').removeClass('ui-selected');
            $('.selecting').addClass('ui-selected');
        },
        selecting: function(event,ui){
            if($('.ui-selecting').length == 1)
                $(ui.selecting).addClass('selecting');

            $('.ui-selecting').removeClass('ui-selecting');
            $('.selecting').addClass('ui-selecting');
        },
        unselecting: function(event,ui){
            if($(ui.unselecting).hasClass('selecting'))
                $(ui.unselecting).removeClass('selecting');
        }
    });

    $('#selectable').on('mouseenter', '.ui-selectee', function(){
        if(_mousedown)
            $(this).addClass('selecting');
    });
});

DEMO: http://jsfiddle.net/dirtyd77/7UVNS/5/ (HELPER HIDDEN)

http://jsfiddle.net/dirtyd77/7UVNS/6/ (HELPER VISIBLE)

Let me know if you have any questions!

---

***UPDATE:***

.selectable() is not able to do what you are looking for. However, here is something I created. Hope it helps!

JAVASCRIPT:

$(function() {
    var _mousedown = false,
        _last=null;    
    $('#selectable li').mousedown(function(){
        _mousedown = true;
        $('.ui-selected').removeClass('ui-selected');
        $('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
        $(this).addClass('ui-selecting');
    }).mouseup(function(){
        _mousedown=false;  
        $('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
        $('#selectable li').removeAttr('unselectable style');
    }).mouseenter(function(){
        if(_mousedown){
            if($(this).hasClass('ui-selecting'))
                $(_last).removeClass('ui-selecting');

            $(this).addClass('ui-selecting')
        }
    }).mouseleave(function(){
        if(_mousedown){
            _last =  $(this)[0];
            $(this).addClass('ui-selecting');
        }
    });
}); 

DEMO: http://jsfiddle.net/dirtyd77/7UVNS/9/

---

***UPDATE #2:***

If you want to use this on a mobile device, I recommend changing up the format entirely to avoid any possible pitfalls. Here is how I would go about it:

JAVASCRIPT:

$(function() {
    var _clicked = false;
    $('#btn_select').click(function(){
        _clicked = false;
        $(this).hide();
        $('#selectable li').removeAttr('unselectable style');
        $('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
    });
    $('#selectable li').click(function(){
        if(!_clicked){
            _clicked = true;
            $('.ui-selected').removeClass('ui-selected');
            $('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
            $('#btn_select').show();
        }
        if($(this).hasClass('ui-selecting')){
            $(this).removeClass('ui-selecting');
        }else{
            $(this).addClass('ui-selecting');
        }
    });
});  

*NOTE: you might want a $('body').click() to act as the end_selection button.

DEMO: http://jsfiddle.net/dirtyd77/7UVNS/13/

Answer 2

This doesn't answer the original question, but it does show how to access the helper div of the selectable widget.

var helper = $( "#selectable" ).selectable('widget').data().uiSelectable.helper;
helper.css( { border:'none' } );