如何在 jquery ui droppable 中使用动态接受值？

Question

我正在使用 Jquery-ui。 我在一页中有不同的可放置 ul(s)，也有不同的可拖动 li(s)。我想要的是： 1. ul 的名称不同，如“FUNCTION”、“BUG”等。 2. li 因类而异，如“.FUNCTOIN”、“.BUG”等。 3.标题为“FUNCTION”的ul只能接受类为“.FUNCTION”的li等。 4. ul(s) 的标题只有在视图中创建时才能知道，根据存储在数据库中的一些值。

但后来我遇到了一些问题，这里有不同的情况：

如果我使用常量值，它工作得很好，比如：

        $("ul.droppable").droppable({
            accept: ".FUNCTION",

虽然以下所有方法都失败了：

        $("ul.droppable").droppable({
            accept: "." + $(this).attr("title"), 

        $("ul.droppable").droppable({
            accept: '.' + $(this).attr("title"), 

        $("ul.droppable").droppable({
            accept: "\." + $(this).attr("title"), 

        $("ul.droppable").droppable({
            accept: '\.' + $(this).attr("title"), 

所以我把“。”在标题中并尝试了以下方法，但都失败了：

        $("ul.droppable").droppable({
            accept: $(this).attr("title"), 

顺便说一句，当我的意思是“失败”时，没有错误，弹出等。droppable 只是没有工作（不活动，不悬停，不能下降。）。

我发现了很多关于这个“接受”的演示或 Q/A，但他们都在使用可以在运行前定义的东西。所以“接受”只能使用常量值，或者我使用它的方式是错误的？ 感谢您的回答或建议或可能有帮助的 cmets。

---

根据Xnake的回答，这样做的方法是：

在droppable的旧代码之前，添加前3行：

        $("ul.droppable.accept").droppable({
            accept: function (e) { if (e.hasClass($(this).attr('accept'))) return true; }
        });
        $("ul.droppable").droppable({
            activeClass: "ui-state-default",
            ... //this is the old code.

这意味着如果我们给 droppable ul 一个“接受”类，它将只接受具有某个类的对象；否则，它可以接受任何可拖动的对象。

然后在视图中：

<ul class = "stories-of-category droppable accept" accept = "@map.Type" >
...
</ul>

如果有任何与@map.Type 同名的类的对象，则可以将其删除。例如：

<ul title = ".."> //this is another ul.
    <li class = "@map.Type">
        @map.Title
    </li>
    ...
</ul>

Answer 1

您可以将 droppable() 中的 accept 改为函数，并在其中指定您的条件：

accept: function(e){
    if(e.hasClass($(this).attr('title'))) return true;
}

或更短：

accept: function(e){
    return e.hasClass($(this).attr('title'));
}

谢谢。