Question

I have made this chess game, but i need help with the accept setting in jQuery UI Droppable.

Here is the fiddle:
http://jsfiddle.net/kevinsimper/ZzHjz/3/

I tried to do that, when you drop something, it will update all the td there are empty, but it do not seems to work.

Can you help me?

Answer 1

The question should probably have stated:

After dragging an element, the recently vacated td does not become
a valid, droppable, target for future drags.

The problem was:
You were only creating droppable objects on the initial set of td:empty. Therefore, any non-empty td did not even have a droppable object created to manipulate.

The solution is:
Create droppable objects on all the td’s. Then disable droppability on all the non-empty td’s. Note that you don’t have to enable droppability on all the td:empty’s every time. You only have to enable it on the recently vacated td. (You should also disable droppability on the newly occupied td.)

http://jsfiddle.net/pabo/7M3WJ/

$('a').draggable({ containment: "table", revert: 'invalid' });

$('td').droppable({
    drop: function(ev, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(droppedOn).droppable("disable");
        $(dropped).parent().droppable("enable");
        $(dropped).detach().css({top: 0, left: 0}).appendTo(droppedOn);
    }
});   

$('td').not('td:empty').droppable("disable");

…incidentally, shouldn’t a chess board be 8×8, and not 10×10?