CODEWITHSUNDEEP
mousedragjquery-ui-selectable
Deepa Thalikar
Deepa Thalikar

Reputation: 115

JQuery UI selectable plugin - Multiple mouse drag selection and unselect option

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

Upvotes: 2

Views: 2658

Answers (1)

Deepa Thalikar
Deepa Thalikar

Reputation: 115

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!

Upvotes: 2

Related Questions