jquery-ui - 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/ (隐藏助手)

http://jsfiddle.net/dirtyd77/7UVNS/6/ (助手可见)

如果您有任何疑问，请告诉我!

<小时/>

***更新:***

.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/