没有选择框的jQuery UI可选

Question

在这里给出这个示例：http://jqueryui.com/selectable/#display-grid我想在没有单击“拖动”时出现的“选择框”进行选择。也就是说，当我点击数字5然后拖到数字6然后拖到10时我得到了这个：

其实我想要的是从5拖到6到10并且只选择它们而没有9。

我搜索了文档并找不到该选项，而我的谷歌技能并没有给我带来任何好运，而且我认为这一定已经完成了它只是碰巧我无法自己掌握或者找到一个现有的解决方案，所以任何帮助在这里都表示赞赏（不是说你应该为我做研究，我只是希望有人在此之前处理这个，所以他可以指出我正确的方向）。

也可能是因为我试图用jquery UI来实现这一点，但是这是我发现的第一个这样的例子，它符合我想要完成的任务。

Answer 1

首先，您可能希望隐藏.ui-selectable-helper或更改CSS：

.ui-selectable-helper{display:none;}

接下来，做这样的事情：

$(function() {
    var _mousedown = false;
    $('#selectable').selectable({
        start: function(event,ui){
            _mousedown=true;
        },
        stop: function(event,ui){
            _mousedown=false;
            $('.ui-selected').removeClass('ui-selected');
            $('.selecting').addClass('ui-selected');
        },
        selecting: function(event,ui){
            if($('.ui-selecting').length == 1)
                $(ui.selecting).addClass('selecting');

            $('.ui-selecting').removeClass('ui-selecting');
            $('.selecting').addClass('ui-selecting');
        },
        unselecting: function(event,ui){
            if($(ui.unselecting).hasClass('selecting'))
                $(ui.unselecting).removeClass('selecting');
        }
    });

    $('#selectable').on('mouseenter', '.ui-selectee', function(){
        if(_mousedown)
            $(this).addClass('selecting');
    });
});

样本： http://jsfiddle.net/dirtyd77/7UVNS/5/（HELPER HIDDEN）

http://jsfiddle.net/dirtyd77/7UVNS/6/（HELPER VISIBLE）

如果您有任何疑问，请与我联系！

---

*** UPDATE：***

.selectable()无法满足您的需求。但是，这是我创造的东西。希望它有所帮助！

JAVASCRIPT：

$(function() {
    var _mousedown = false,
        _last=null;    
    $('#selectable li').mousedown(function(){
        _mousedown = true;
        $('.ui-selected').removeClass('ui-selected');
        $('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
        $(this).addClass('ui-selecting');
    }).mouseup(function(){
        _mousedown=false;  
        $('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
        $('#selectable li').removeAttr('unselectable style');
    }).mouseenter(function(){
        if(_mousedown){
            if($(this).hasClass('ui-selecting'))
                $(_last).removeClass('ui-selecting');

            $(this).addClass('ui-selecting')
        }
    }).mouseleave(function(){
        if(_mousedown){
            _last =  $(this)[0];
            $(this).addClass('ui-selecting');
        }
    });
}); 

样本： http://jsfiddle.net/dirtyd77/7UVNS/9/

---

***更新＃2：***

如果您想在移动设备上使用此功能，我建议您完全更改格式以避免任何可能的陷阱。我将如何解决这个问题：

JAVASCRIPT：

$(function() {
    var _clicked = false;
    $('#btn_select').click(function(){
        _clicked = false;
        $(this).hide();
        $('#selectable li').removeAttr('unselectable style');
        $('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
    });
    $('#selectable li').click(function(){
        if(!_clicked){
            _clicked = true;
            $('.ui-selected').removeClass('ui-selected');
            $('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
            $('#btn_select').show();
        }
        if($(this).hasClass('ui-selecting')){
            $(this).removeClass('ui-selecting');
        }else{
            $(this).addClass('ui-selecting');
        }
    });
});  

*注意：您可能希望$('body').click()充当end_selection按钮。

样本： http://jsfiddle.net/dirtyd77/7UVNS/13/

Answer 2

这并没有回答原始问题，但它确实显示了如何访问可选小部件的帮助器div。

var helper = $( "#selectable" ).selectable('widget').data().uiSelectable.helper;
helper.css( { border:'none' } );