jQuery UI選択可能ウィジェットマウスドラッグで複数選択解除

Question

私はjQuery UI選択可能ウィジェットを使用しています。私はIs there a way to change event parameters in jQuery?の解決策を見て、複数の選択を（マウスドラッグで）うまく動作させるようにしました。今私は動作しない複数の要素の選択を解除する同様の機能を取得しようとしています。

$('#selectlist').on("mousedown", function (e) { 
    e.metaKey = true; //multiple select true 
    //e.ctrlKey = true; 
}).selectable({ 
    filter: '.select-li', 
    selecting: function (event, ui) { 
     debugger; 
     //if ($(ui.selecting).hasClass('li-planned')) { 
     // $(ui.selecting).removeClass("ui-selecting"); 
     //} 
    }, 
    unselecting: function (event, ui) { 
     //if ($(ui.unselecting).hasClass('li-planned')) { 
     // $(ui.unselecting).removeClass("ui-unselecting").addClass('ui-selected'); 
     //} 
    }, 
    stop: function (event) { 
     //debugger; 
     //do some work here 
    } 
}) 

私は達成するために複数のオプションを試しましたが、それまでは私はそれを得ることができません。どんな助けもありがとう。

Answer 1

あなたは、単にダウンあなたのマウスを使用せずに、あなたは複数選択可能に選択することができます

$("#selectlist").selectable(); 

であなたのリストの選択を行うことができます。を選択ながらCtrlキーを押すと、マウスドラッグ

1. 。 （上記の選択に基づいて）複数を選択解除に

、

1.A.いずれかを選択すると他のすべてが選択解除されます
1.b。リスト内の空白領域を選択すると（リスト1とリスト2の間のスペース）、すべてが選択解除されます。 2. Ctrlを入力します。を選択解除します。

は、私は私の答えで解決hereも追加スニペットを作成しましたhttp://jqueryui.com/selectable/#default

Answer 2

$(function() { 
 
    $("#selectable").bind("mousedown", function(e) { 
 
    e.metaKey = true; 
 
    }).selectable(); 
 
    $("#selectable").selectable({ 
 
    selected: function(event, ui) { 
 
     if (!$(ui.selected).hasClass('selected-flag')) { 
 
     $(ui.selected).addClass('selected-flag'); 
 
     } else { 
 
     $(ui.selected).removeClass("ui-selected selected-flag"); 
 
     } 
 
    } 
 
    }); 
 
});

#feedback { 
 
    font-size: 1.4em; 
 
} 
 
#selectable .ui-selecting { 
 
    background: #FECA40; 
 
} 
 
#selectable .ui-selected { 
 
    background: #F39814; 
 
    color: white; 
 
} 
 
#selectable { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 60%; 
 
} 
 
#selectable li { 
 
    margin: 3px; 
 
    padding: 0.4em; 
 
    font-size: 1.4em; 
 
    height: 18px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all"> 
 
<script src="https://code.jquery.com/ui/1.8.5/jquery-ui.min.js"></script> 
 

 
<div class="demo"> 
 
    <ol id="selectable"> 
 
    <li class="ui-widget-content">Item 1</li> 
 
    <li class="ui-widget-content">Item 2</li> 
 
    <li class="ui-widget-content">Item 3</li> 
 
    <li class="ui-widget-content">Item 4</li> 
 
    <li class="ui-widget-content">Item 5</li> 
 
    <li class="ui-widget-content">Item 6</li> 
 
    </ol> 
 

 
</div>

のjQuery-UIのデモを参照してください。ここでは、selectイベントの要素にフラグクラスを追加して、後でどの項目が選択されたのかを特定し、ui-selectedとフラグクラスの両方を削除して、それらを選択解除します。私はそれがあなたが探しているものだと思います。

Answer 3

私はAminurが与えられた情報に基づいてあなたの質問に答えたと思います。それはおそらく私があなたの答えの下であなたのフィードバックを読む前に、前にあなたが思っていたでしょう。

ここに別の提案があります。この提案は、ユーザが選択項目をドラッグし始めると、基本的にすべての選択された項目をクリアします。多分、複数の要素を選択解除しようとしているとき、これはあなたの後ろのことでしょう。

$(function() { 
    $("#selectable").bind("mousedown", function(e) { 
    if(e.target.className.indexOf('ui-selected') === -1){ 
     e.metaKey = true; 
    } 
    }).selectable(); 
}); 

Fiddle