JQuery UI可选插件 - 多个鼠标拖动选择和取消选择选项

时间:2012-03-20 23:46:12

标签: mouse drag jquery-ui-selectable

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

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

我在这个论坛上经历过相关问题,但到目前为止还没有解决方案对我有用!任何人都可以帮我定制这个插件或指向一些可以帮助我做到这一点的资源吗?

提前多多感谢!

Deepa Thalikar

1 个答案:

答案 0 :(得分:2)

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 = [];
      }
    });
  });

但是必须找出通过鼠标拖动取消选择多个单元格,尝试过但没有成功!任何帮助,谢谢!