jQuery UI可选插件-多个鼠标拖动选择和取消选择选项 [英] JQuery UI selectable plugin - Multiple mouse drag selection and unselect option

问题描述

我正在使用JQuery UI可选插件来选择表单元格，这里是示例代码: http://jsbin.com/ejewes/edit#javascript,html,live

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

我想对此进行更改，以便能够
1.进行多个鼠标拖动选择(不使用ctrl键)
2.通过拖动来取消选择单元格，或单击单个/多个选定单元格

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?

非常感谢！

Deepa Thalikar

Deepa Thalikar

推荐答案

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!

这篇关于jQuery UI可选插件-多个鼠标拖动选择和取消选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！