Question

I am using the JQuery UI selectable plugin to select table cells, here is the example code: http://jsbin.com/ejewes/edit#javascript,html,live

I want to make changes to this so that I am able to
1. do multiple mouse drag selects (without using the ctrl key)
2. deselect cells by drag or click on single/multiple selected cells

I went through related questions on this forum, but no solution has worked for me so far! Can anybody please help me customize this plugin or point me to some resource that could help me do this?

Thanks a lot in advance!

Deepa Thalikar

Answer 1

Here's the solution: 

var _selectRange = false, _deselectQueue = [];
$(function() {
   $( "#selectable" ).selectable({
     selecting: function (event, ui) {
        if (event.detail == 0) {
            _selectRange = true;
            return true;
        }
        if ($(ui.selecting).hasClass('ui-selected')) {
            _deselectQueue.push(ui.selecting);
        }
    },
    unselecting: function (event, ui) {
        $(ui.unselecting).addClass('ui-selected');
    },
    stop: function () {
        if (!_selectRange) {
            $.each(_deselectQueue, function (ix, de) {
                $(de)
                    .removeClass('ui-selecting')
                    .removeClass('ui-selected');
            });
        }
        _selectRange = false;
        _deselectQueue = [];
      }
    });
  });

But got to find out how deselect multiple cells by mouse drag, tried but no success! Any help, appreciated!