Jquery - 动态删除droppable类

Question

我正在尝试做战舰游戏。我有一个draggable / droppable的问题。 请查看this jsfiddle。

如果您从右侧区域取船并向左侧移动，然后再乘坐另一艘，您将在区域1看到更改等级。

white - empty - droppable
blue - ship - should be not droppable
yellow - adjacent to ship  - should be not droppable

我的代码：

 $(".ship1").draggable({ revert: "invalid", snap: ".droppable",
        start: function(event, ui){ 
             ....
            for(var i=0; i<100; i++)
            {
                if(playerArray[i].adjacent)
                {
                    var quickTpId = "#p"+i; 
                    $(quickTpId).removeClass('empty'); 
                    $(quickTpId).addClass('adjacent');
                    $(quickTpId).removeClass('droppable');
                }
                if(playerArray[i].empty)
                {
                    var quickTpId = "#p"+i; 
                    $(quickTpId).removeClass('adjacent'); 
                    $(quickTpId).addClass('empty');
                    $(quickTpId).addClass('droppable');
                }
            }
        }
    });

但这不起作用。我可以把船放在蓝色和黄色区域。那不好。