jQuery UI 可选择不带选择框

Question

在这里给出这个例子：http://jqueryui.com/selectable/#display-grid 我想在没有单击“n 拖动”时出现的“选择框”的情况下进行选择。即，当我点击数字 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/

Answer 2

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

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