Question

I’m having some trouble figuring out the right selector syntax for this problem and would appreciate some assistance.

So, I have a table that has five columns. In each row, in each cell, I have DIV elements with a class called MyClass. I’ve setup objects of MyClass to be draggable, and now I need to setup the appropriate drop targets. I would like for any cells in the row that an element with MyClass exists, except the first column, but ONLY for the row in which the element exists (it should not be able to be dropped in columns of rows above or below it).

I hope that makes sense. Anyone have any ideas what would be the correct syntax for that? Below is what I currently have working, but it’s not quite right, because it allows dropping in rows above or below.

$(".MyClass").closest("tr").children(":not('.column-1')").droppable({ ... });

Answer 1

You can pass a function to the accept option for .droppable() so it only accepts those <div> elements in the same row, like this:

$(".MyClass").closest("tr").children(":not('.column-1')").droppable({
    accept: function(draggable) {
        return $.contains(this.parentNode, draggable[0]);
    }
});

In the function draggable is the jQuery object that is the draggable, we’re just using $.contains() to see if the .parentNode (the <tr>) contains that draggable…meaning the <div> you’re trying to drop came from this row.

You can test it out here.