javascript - jQuery Sortable - 允许将某些项目仅放入某些列表中

Question

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

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

<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'});
});

我应该指出，我完全不喜欢涉及花括号的编程语言。我写了上面的代码，但我不能告诉你大部分代码是做什么的，更不用说它为什么工作了。因此，如果您能用最简单的术语来组织您的答案，我将不胜感激。

Answer 1

那么，我有没有提到我讨厌 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 部分，在目标列表的“接收”函数中，有条件地取消对 sender 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();

.sender 部分至关重要:我不知道在尝试使用 ui.item 或 li.noB 或任何。 (这对我来说意义不大:我想要防止的是将该项目放在错误的位置，那么为什么我需要取消从父项中删除它列表？但无论如何。)

在我的案例中，第 3 部分是将列表标签从列表中移出，因为除了不太有效之外，它还使 cancel 做了一些非常奇怪的事情。

第四部分，灰度:在每个可排序框的“开始”函数中使用.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 中定义“disabled”类，否则所有这些体操将完全……什么都做不了。

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