JqueryUI Selectable - 不使用 Ctrl 取消选择

Question

我正在尝试制作一个带有 parent/child/grandchild 缩进的可选列表。请看下面：

$('#theParentList').selectable({
    filter: 'li div',
    selected: function (event, ui) {
        var selectedText = $(ui.selected).text();
        $("#selectedNode").text(selectedText);

        if ($(ui.selected).hasClass('selectedfilter')) {
            $(ui.selected).removeClass('selectedfilter');
        }               
    }
});

但是，我在使用 "unselect" 功能时遇到了很多问题（即没有按下 Ctrl）。 我也不想 "bind" Ctrl 自动按下鼠标（在其他一些解决方案中有描述），b/c 我只想一次选择一个项目时间。另外，我只想了解如何执行控制流以通过事件取消选择（例如 "selected:"）。

我在这里做错了什么？如您所见，由于文本框已使用正确的文本正确更新，因此选择得到了正确的选择。但是，当我将已单击的项目单击到 "unselect"（不按住 Ctrl）时，它不会取消选择。我认为即使在这种情况下，也会触发 "selected" 事件 - 但显然我的 "selected:" 代码有问题。很郁闷..

谢谢大家

Answer 1

尝试

// utilize `dblclick` event to remove selected class
$(".ui-selected").one("dblclick", function(e) {
    $(e.target).removeClass("ui-selected")
});

http://jsfiddle.net/Lmsop4k7/3/

Answer 2

所以我又摆弄了一下，找到了我需要的东西。请看下面。添加了调试文本，以防以后对某人有帮助。关于缩进，我将为 "side question" 创建一个不同的线程。谢谢大家。

http://jsfiddle.net/bgfn3091/2/

    $('#theParentList').selectable({
        filter: 'li div',
        selected: function (event, ui) {
            var selectedText = $(ui.selected).text();
            $("#selectedNode").text(selectedText);

            $(ui.selected).removeClass('ui.selected');

            $("#debugText").text("Selected");              

            if ($(ui.selected).hasClass('alreadySelected')) { // clicking to de-select
                $('#theParentList .alreadySelected').removeClass('alreadySelected'); 
                $(ui.selected).removeClass('ui-selected');

                $("#debugText").text("alreadySelected is present and removed");                                  
            }
            else // clicking to select
            {
                $('#theParentList .alreadySelected').removeClass('alreadySelected'); 
                $(ui.selected).addClass('alreadySelected'); // add to just this element

                $("#debugText").text("alreadySelected added");                                                      
            }
        }
    });

Answer 3

这是我的：

http://jsfiddle.net/carlcarl/Lmsop4k7/4/

您可以拖动 select/unselect 而无需按下 Ctrl。

在selection/unselection中，如果您之前选择的都被选中，则将此动作设置为取消选择。如果之前没有选择多个，则将此动作设置为选择。

JqueryUI Selectable - 不使用 Ctrl 取消选择

JqueryUI Selectable - unselecting without Ctrl

javascript

css

jquery

jquery-ui