2

在这里给出这个例子：http: //jqueryui.com/selectable/#display-grid我想在没有单击“n 拖动”时出现的“选择框”的情况下进行选择。即，当我单击数字 5 并拖动到数字 6 然后到 10 我得到这个：

在此处输入图像描述

实际上我想要的是从 5 拖到 6 到 10，并且只选择它们而不选择 9。

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

也可能是我错过了尝试使用 jquery UI 完成此任务的重点，但这是我发现的第一个适合（某种）我想要完成的示例。

4

2 回答 2

8

首先，您可能想要隐藏.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/（助手可见）

如果您有任何问题，请告诉我！

***更新：***

.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');
        }
    });
});

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

演示：http: //jsfiddle.net/dirtyd77/7UVNS/13/

于 2013-04-10T17:53:36.280 回答
1

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

var helper = $( "#selectable" ).selectable('widget').data().uiSelectable.helper;
helper.css( { border:'none' } );
于 2015-09-23T20:18:21.303 回答