2

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:

enter image description here

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.

Dom
  • 38,906
  • 12
  • 52
  • 81
Nikola
  • 14,888
  • 21
  • 101
  • 165

2 Answers2

8

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/

Dom
  • 38,906
  • 12
  • 52
  • 81
  • Hi Dom, thank you for your help. There is one thing though - in your example if I try to go to 1,2,6,10,9 I end up with selected only 1 and 9, where in fact I would want them all to be selected. – Nikola Apr 10 '13 at 20:14
  • Unfortunately, `.selectable()` will always use the helper. That means you cannot use `.selectable()` to get the desired effect. However, I have written something that should help you out. Check answer. – Dom Apr 10 '13 at 21:14
  • wow, thank you Dom - this is exactly the thing I wanted to accomplish! – Nikola Apr 11 '13 at 05:24
  • @Dom: Now I've been playing with making this example work on mobile (iOS and Android namely) and I've hit a problem with mouseenter and I've been looking alot and as it seems there's not direct solution (like a plugin or sth) for this so am asking you if you maybe encountered this example and how did you solve it? What I had in mind was to bind the "touchmove" event and then check the positions and check if I've gone our of some element and into another - was just hoping there is a little less code heavy solution for this so was hoping you maybe have few thoughts on this. Thx! – Nikola Apr 11 '13 at 12:53
  • @Nikola I'm sorry but I do not have a lot of experience with jQuery Mobile. I just tested this on my phone and see what you mean. To avoid frustration, you might want to go about this in a different manner. I have provided an update to my answer. – Dom Apr 11 '13 at 16:05
1

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' } );
Derek Wade
  • 697
  • 8
  • 11