2

ここにこの例を示します: http://jqueryui.com/selectable/#display-gridクリックしてドラッグすると表示される「選択ボックス」なしで選択したいと思います。つまり、番号 5 をクリックして番号 6 にドラッグし、次に 10 にドラッグすると、次のようになります。

ここに画像の説明を入力

実際に私がしたいのは、5 から 6 から 10 にドラッグし、9 なしでそれらだけを選択することです。

私はドキュメントを検索しましたが、そのオプションを見つけることができませんでした.Googleのスキルでは運がありませんでした.これはすでに行われているに違いないと思っていました。解決策なので、ここで助けていただければ幸いです（あなたが私のために調査を行うべきだと言っているのではなく、誰かが以前にこれに対処したことを望んでいるので、彼は私を正しい方向に向けることができます）。

また、jquery UI でこれを達成しようとする点が欠けている可能性もありますが、これは、私が達成したいこと (のような) に適合することがわかった最初の例でした。

4

2 に答える 2

8

まず、.ui-selectable-helperCSS を非表示にするか変更する必要がある場合があります。

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

ご不明な点がございましたら、お気軽にお問い合わせください。

***アップデート：***

.selectable()あなたが探していることをすることができません。しかし、ここに私が作成したものがあります。それが役に立てば幸い！

ジャバスクリプト:

$(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：***

これをモバイル デバイスで使用する場合は、考えられる落とし穴を避けるために、形式を完全に変更することをお勧めします。これが私がそれについて行く方法です：

ジャバスクリプト:

$(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/

于 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 に答える