如何在JQuery UI上實現切換功能可選？

Question

我正在使用JQuery UI - 可選 。 如果元素已被按下並且已經被選中（切換），我想取消選擇該元素

你能幫我添加這個功能嗎！

Answer 1

由於所有的類回調，你不會比這更好：

$(function () {
        $("#selectable").selectable({
            selected: function (event, ui) {
                if ($(ui.selected).hasClass('click-selected')) {
                    $(ui.selected).removeClass('ui-selected click-selected');

                } else {
                    $(ui.selected).addClass('click-selected');

                }
            },
            unselected: function (event, ui) {
                $(ui.unselected).removeClass('click-selected');
            }
        });
    });

Answer 2

如果您在單擊時按住Ctrl鍵，則可以使用jQuery UI選擇該功能。

如果你真的需要它作為默認功能，你不需要使用selectable，你可以像一個簡單的onclick處理程序一樣，就像nolabel建議的那樣。

或者......您也可以編輯jquery.ui.selectable.js並添加一個可以滿足您需求的選項。 不應該太難，有4個地方檢查event.metaKey ，確保如果你的選項設置，只需運行代碼路徑，就像event.metaKey始終為true一樣。

由於可選項可以使用更多自定義，您還可以為jQuery UI開發人員提供功能請求，以將其包含在下一個正式版本中。

Answer 3

您必須在代碼中注入兩個簡單元素才能實現您想要的效果。 只要您需要反轉/切換功能，這只會反轉metaKey布爾值。

options: {
    appendTo: 'body',
    autoRefresh: true,
    distance: 0,
    filter: '*',
    tolerance: 'touch',
    inverted: false /* <= FIRST*/
},

_mouseStart: function(event) {
    var self = this;

    this.opos = [event.pageX, event.pageY];

    if (this.options.disabled)
        return;

    var options = this.options;

    if (options.inverted) /* <= SECOND*/
        event.metaKey = !event.metaKey; /* <= SECOND*/