4

我正在使用 jQuery UI Sortable 来实现分类选择，链接到一组单选按钮。这部分已经运行了几年。（见 jsFiddle 版本。）现在，客户想要修改它：现在应该只允许某些项目进入某些类别，我完全被卡住了。

在后端，禁用某些单选按钮很容易：

<ul id="L" class="L ui-sortable">
    Available (A):
    <li id='L_1'>
    <input type='radio' name='L_1' id='L_1_A' value='A'>
      <label for='L_1_A'>A</label>
    <input type='radio' name='L_1' id='L_1_B' disabled='disabled' value='B'>
      <label for='L_1_B'>B</label>
    <input type='radio' name='L_1' id='L_1_C' value='C'>
      <label for='L_1_C'>C</label>
    Item 1 can't go in B
    </li>
    <li id='L_2'>
    <input type='radio' name='L_2' id='L_2_A' value='A'>
      <label for='L_2_A'>A</label>
    <input type='radio' name='L_2' id='L_2_B' value='B'>
      <label for='L_2_B'>B</label>
    <input type='radio' name='L_2' id='L_2_C' disabled='disabled' value='C'>
      <label for='L_2_C'>C</label>
    Item 2 can't go in C
    </li>
    <!-- etc. -->
</ul>
<ul id='L_B' class='L ui-sortable cat'>Selected - B</ul>
<ul id='L_C' class='L ui-sortable cat'>Selected - C</ul>

（单选按钮通过 CSS 和 javascript 的组合隐藏。）这具有无法保存不正确分类的副作用：如果您尝试将某些内容放入它无法进入的类别中，您的选择将被完全忽略（因为禁用的单选按钮不返回值）。然而，除非你回去查看你保存的记录，否则你永远不会知道发生了什么：对你来说，看起来你像往常一样把物品放在盒子里。

我想要的是链接到禁用单选按钮的目标框在抓取项目时“变灰”，如果他们仍然尝试将其放入该框中，则该项目应跳回其起点。基本上，它的行为应该类似于设置 时发生的情况$("ul.notallowed").sortable("option","disabled",true);，但仅在用户“持有”不允许的项目时。

我知道有一个.is(":disabled")命令可以确定单选按钮是否被禁用，但我不知道把它放在哪里。

这是现有实现的javascript，即所有项目都允许所有类别。（我确信有更好/更有效的编码方式，但我很高兴它可以工作。）

$(function() {
    $("#L").sortable({
        connectWith: '.L',
        containment: '#ListContainer',
        receive: function(event, ui) {
            $(ui.item).find('input:radio')[0].checked = true;
        }
    }).disableSelection();
    $("#L_B").sortable({
        connectWith: '.L',
        containment: '#ListContainer',
        receive: function(event, ui) {
            $(ui.item).find('input:radio')[1].checked = true;
        }
    }).disableSelection();
    $("#L_C").sortable({
        connectWith: '.L',
        containment: '#ListContainer',
        receive: function(event, ui) {
            $(ui.item).find('input:radio')[2].checked = true;
        }
    }).disableSelection();
});
$(document).ready(function() {
    $('.B').closest('li').appendTo("#L_B");
    $('.C').closest('li').appendTo("#L_C");
    $('ul.ui-sortable').width("10em");
    $('ul.ui-sortable li').css({cursor:'pointer'});
});

我应该注意到，我完全不擅长涉及花括号的编程语言。我写了上面的代码，但我无法告诉你它的大部分功能，更不用说它为什么起作用了。因此，如果您能以最简单的方式回答您的问题，我将不胜感激。

4

1 回答 1

9

那么，我有没有提到我讨厌 JavaScript？但是我得到了它的工作（没有变灰，但我早就不再关心它了），变灰和一切。

第 1 部分，忘记在 jQuery 中检测禁用的单选按钮。（(":disabled")用作选择器，但它返回一个单选按钮，而不是其父列表项。）相反，只需将一个（或多个类）添加到列表项。

<li class="noB">
    <label><input type="radio" name="L1" value="A" />A</label>
    <label><input type="radio" name="L1" value="B" disabled="disabled" />B</label>
    <label><input type="radio" name="L1" value="C" />C</label>
    Item 1 can't go in B
</li>

第 2 部分，在目标列表的“接收”功能中，有条件地取消发送方jQuery 对象的可排序。例如，

$("#L_B").sortable({
    connectWith: '.L',
    containment: '#ListContainer',
    receive: function (event, ui) {
        if ($(ui.item).hasClass("noB")) {
            $(ui.sender).sortable("cancel");
        }
        else {
            $(ui.item).find('input:radio')[1].checked = true;
        }
    },
}).disableSelection();

ui.item.sender 部分至关重要：我不知道在尝试各种东西时我永久失去了多少头发li.noB。（这对我来说没有什么意义：我想要阻止的是将项目放在错误的位置，那么为什么我需要取消从父列表中删除它？但无论如何。）

就我而言，第 3 部分是将列表标签从列表中移出，因为除了不是很有效之外，它还做了cancel很多事情。

第 4 部分，灰度：.addClass在每个可排序框的“开始”功能和.removeClass“停止”功能中使用。我把这些放在 之后receive: function(...) {...}，但顺序不重要。（毫无疑问，有一些方法可以编写一次这个函数并每次调用它，但是我是否提到过 JavaScript 和我相处不来？）

    start: function (event, ui) {
        if ($(ui.item).hasClass("noB")) {
            $("#L_B").addClass("disabled");
        }
        if ($(ui.item).hasClass("noC")) {
            $("#L_C").addClass("disabled");
        }
    },
    stop: function (event, ui) {
        if ($(ui.item).hasClass("noB")) {
            $("#L_B").removeClass("disabled");
        }
        if ($(ui.item).hasClass("noC")) {
            $("#L_C").removeClass("disabled");
        }
    }

不要忘记在你的 CSS 中定义“禁用”类，否则所有这些体操将完全……什么都没有。

工作 jsFiddle：http: //jsfiddle.net/NY7Ms/4/

于 2013-06-04T02:49:26.647 回答