Question

I’m using the Jquery-ui.
I have different droppable ul(s) in one page, and different draggable li(s) too. What I wanted was that:
1. ul differ from each other by their title, like “FUNCTION”, “BUG”, etc.
2. li differ from each other by their class, like “.FUNCTOIN”, “.BUG”, etc.
3. ul with title of “FUNCTION” can only accept li with class “.FUNCTION”, etc.
4. the titles of the ul(s) can only be known while they are being created in the View, according to some values stored in the db.

but then i encuntered some problems, here are the different satuations:

if i use constant value, it works well, like:

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

while all the following ways failed:

        $("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"), 

so i put the “.” in the title and tried the following, but all of them failed:

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

btw when i mean “failed”, there is no error, pop up, etc. The droppable just didn’t work (not active, not hovered, can not drop.).

I found lot’s of demoes or Q/A of this “accept”, but all of them are using something that can be defined before runtime. So the “accept” can use only constant value, or the way i’m using it was wrong?
Thanks for answer or recommandations or comments that may help.

---

According to the answer from Xnake, the way to do it was conclude to:

before the old code of droppable, add the first 3 lines:

        $("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.

That means if we give a “accept” class to the droppable ul, it will accept only object with some class; otherwise, it can accept any draggable.

Then in the view:

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

if any object with class of the same name with @map.Type, it can be dropped here. For example:

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

Answer 1

You can make accept in droppable() as a function instead and specify your criteria inside:

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

Or shorter:

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

Thanks.