如何在jqueryui droppable中使用danymic接受值?

che*_*eny 1 jquery-ui droppable draggable

我正在使用Jquery-ui.我在一个页面中有不同的可丢弃的ul(s),以及不同的可拖动的li(s).我想要的是:1.ul的标题彼此不同,如"FUNCTION","BUG"等.2.li因类别而异,如".FUNCTOIN",".BUG", 3.具有"FUNCTION"标题的ul只能接受带有".FUNCTION"等级的li.只有在视图中创建它们时才能知道ul的标题.存储在db中的值.

但后来我遇到了一些问题,这里有不同的饱和度:

如果我使用恒定值,它运作良好,如:

        $("ul.droppable").droppable({
            accept: ".FUNCTION",
Run Code Online (Sandbox Code Playgroud)

而以下所有方式都失败了:

        $("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"), 
Run Code Online (Sandbox Code Playgroud)

所以我把"." 在标题中尝试了以下内容,但所有这些都失败了:

        $("ul.droppable").droppable({
            accept: $(this).attr("title"), 
Run Code Online (Sandbox Code Playgroud)

顺便说一句,当我的意思是"失败",没有错误,弹出等等.可放置的东西不起作用(不活跃,不悬停,不能下降.).

我发现了很多这种"接受"的转发或Q/A,但它们都使用了可以在运行时之前定义的东西.所以"接受"只能使用恒定值,或者我使用它的方式是错误的?感谢您的回答或建议或评论可能会有所帮助.


根据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.
Run Code Online (Sandbox Code Playgroud)

这意味着如果我们给droppable ul一个"accept"类,它只接受带有某个类的对象; 否则,它可以接受任何可拖动的.

然后在视图中:

<ul class = "stories-of-category droppable accept" accept = "@map.Type" >
...
</ul>
Run Code Online (Sandbox Code Playgroud)

如果任何具有@ map.Type同名类的对象,则可以将其删除.例如:

<ul title = ".."> //this is another ul.
    <li class = "@map.Type">
        @map.Title
    </li>
    ...
</ul>
Run Code Online (Sandbox Code Playgroud)

小智 8

您可以acceptdroppable()作为替代功能,并指定内部您的标准:

accept: function(e){
    if(e.hasClass($(this).attr('title'))) return true;
}
Run Code Online (Sandbox Code Playgroud)

或更短:

accept: function(e){
    return e.hasClass($(this).attr('title'));
}
Run Code Online (Sandbox Code Playgroud)

谢谢.