{"id":1175,"date":"2015-01-31T11:40:28","date_gmt":"2015-01-31T11:40:28","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=1175"},"modified":"2015-08-10T06:54:39","modified_gmt":"2015-08-10T06:54:39","slug":"jquery-ui-selectable-without-selection-box","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/jquery-ui-selectable-without-selection-box\/","title":{"rendered":"jQuery UI Selectable Without Selection Box"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

My question<\/a> was:<\/p>\n

Given this example here:\u00a0http:\/\/jqueryui.com\/selectable\/#display-grid<\/a>\u00a0I 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:<\/p>\n

\"enter<\/p>\n

where in fact what i would like to is drag from 5 to 6 to 10 and have only them selected without 9.<\/p>\n

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).<\/p>\n

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.<\/p>\n

\u00a0The rather extensive answer, by Dom<\/a>,\u00a0was:<\/p>\n

First, you might want to hide\u00a0.ui-selectable-helper<\/code>\u00a0or change the CSS:<\/p>\n

.ui-selectable-helper{display:none;}<\/pre>\n
Next, do something like this:<\/p>\n
$(function(){var _mousedown =false;\r\n    $('#selectable').selectable({\r\n        start:function(event,ui){\r\n            _mousedown=true;},\r\n        stop:function(event,ui){\r\n            _mousedown=false;\r\n            $('.ui-selected').removeClass('ui-selected');\r\n            $('.selecting').addClass('ui-selected');},\r\n        selecting:function(event,ui){if($('.ui-selecting').length ==1)\r\n                $(ui.selecting).addClass('selecting');\r\n\r\n            $('.ui-selecting').removeClass('ui-selecting');\r\n            $('.selecting').addClass('ui-selecting');},\r\n        unselecting:function(event,ui){if($(ui.unselecting).hasClass('selecting'))\r\n                $(ui.unselecting).removeClass('selecting');}});\r\n\r\n    $('#selectable').on('mouseenter','.ui-selectee',function(){if(_mousedown)\r\n            $(this).addClass('selecting');});});<\/pre>\n
DEMO:\u00a0http:\/\/jsfiddle.net\/dirtyd77\/7UVNS\/5\/<\/a>\u00a0(HELPER HIDDEN)<\/p>\n
http:\/\/jsfiddle.net\/dirtyd77\/7UVNS\/6\/<\/a>\u00a0(HELPER VISIBLE)<\/p>\n
Let me know if you have any questions!<\/p>\n
\n
***UPDATE:***<\/h2>\n
.selectable()<\/code>\u00a0is not able to do what you are looking for. However, here is something I created. Hope it helps!<\/p>\n
JAVASCRIPT:<\/p>\n
$(function(){var _mousedown =false,\r\n        _last=null;    \r\n    $('#selectable li').mousedown(function(){\r\n        _mousedown =true;\r\n        $('.ui-selected').removeClass('ui-selected');\r\n        $('#selectable li').attr('unselectable','on').css('user-select','none');\r\n        $(this).addClass('ui-selecting');}).mouseup(function(){\r\n        _mousedown=false;  \r\n        $('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');\r\n        $('#selectable li').removeAttr('unselectable style');}).mouseenter(function(){if(_mousedown){if($(this).hasClass('ui-selecting'))\r\n                $(_last).removeClass('ui-selecting');\r\n\r\n            $(this).addClass('ui-selecting')}}).mouseleave(function(){if(_mousedown){\r\n            _last =  $(this)[0];\r\n            $(this).addClass('ui-selecting');}});});<\/pre>\n
DEMO:\u00a0http:\/\/jsfiddle.net\/dirtyd77\/7UVNS\/9\/<\/a><\/p>\n
\n
***UPDATE #2:***<\/h2>\n
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:<\/p>\n
JAVASCRIPT:<\/p>\n
$(function(){var _clicked =false;\r\n    $('#btn_select').click(function(){\r\n        _clicked =false;\r\n        $(this).hide();\r\n        $('#selectable li').removeAttr('unselectable style');\r\n        $('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');});\r\n    $('#selectable li').click(function(){if(!_clicked){\r\n            _clicked =true;\r\n            $('.ui-selected').removeClass('ui-selected');\r\n            $('#selectable li').attr('unselectable','on').css('user-select','none');\r\n            $('#btn_select').show();}if($(this).hasClass('ui-selecting')){\r\n            $(this).removeClass('ui-selecting');}else{\r\n            $(this).addClass('ui-selecting');}});});<\/pre>\n
*NOTE: you might want a\u00a0$('body').click()<\/code>\u00a0to act as the end_selection button.<\/p>\n
DEMO:\u00a0http:\/\/jsfiddle.net\/dirtyd77\/7UVNS\/13\/<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts I will will be posting…<\/p>\n","protected":false},"author":1,"featured_media":609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-1175","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=1175"}],"version-history":[{"count":3,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1175\/revisions"}],"predecessor-version":[{"id":1693,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1175\/revisions\/1693"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/609"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=1175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=1175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=1175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}