Nikola Brežnjak blog - Tackling software development with a dose of humor
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Home
Daily Thoughts
Ionic
Stack Overflow
Books
About me
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Nikola Brežnjak blog - Tackling software development with a dose of humor
Stack Overflow

jQuery UI Selectable Without Selection Box

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

My question was:

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.

 The rather extensive answer, by Dom, was:

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/

Recent posts

  • Discipline is also a talent
  • Play for the fun of it
  • The importance of failing
  • A fresh start
  • Perseverance

Categories

  • Android (3)
  • Books (114)
    • Programming (22)
  • CodeProject (35)
  • Daily Thoughts (77)
  • Go (3)
  • iOS (5)
  • JavaScript (127)
    • Angular (4)
    • Angular 2 (3)
    • Ionic (61)
    • Ionic2 (2)
    • Ionic3 (8)
    • MEAN (3)
    • NodeJS (27)
    • Phaser (1)
    • React (1)
    • Three.js (1)
    • Vue.js (2)
  • Leadership (1)
  • Meetups (8)
  • Miscellaneou$ (77)
    • Breaking News (8)
    • CodeSchool (2)
    • Hacker Games (3)
    • Pluralsight (7)
    • Projects (2)
    • Sublime Text (2)
  • PHP (6)
  • Quick tips (40)
  • Servers (8)
    • Heroku (1)
    • Linux (3)
  • Stack Overflow (81)
  • Unity3D (9)
  • Windows (8)
    • C# (2)
    • WPF (3)
  • Wordpress (2)

"There's no short-term solution for a long-term result." ~ Greg Plitt

"Everything around you that you call life was made up by people that were no smarter than you." ~ S. Jobs

"Hard work beats talent when talent doesn't work hard." ~ Tim Notke

© since 2016 - Nikola Brežnjak