javascript - 如何为 droppable td 编写接受条件，以便它只接受表中的邻居 td

Question

我有一张表，其中只有一个 td 是空的。用户可以在这里拖放 td 元素。我正在尝试编写条件，以便空 td 只接受其相邻的 td 元素。

能否请您建议我接受条件，以便 ui.droppable 或空 td 接受其邻居 td 。

代码:

$("#dropdiv #c tr td").draggable({
    appendTo: "body",
    helper: 'clone',
    cursor: "move",
    revert: "invalid"
});

$('#c tr td').droppable({
    accept: function(event, ui) {
        return ($(this).html().trim().length == 0)
    },
    drop:function (event, ui ) {
        $(this).append(ui.draggable.text());
        $(ui.draggable).empty();
    }
}); 

在上面的代码中，如果 td 为空，则只有 td 接受 ui.draggable 。

请在此处找到演示:http://jsfiddle.net/ggbhat/6JKWp/2/

在演示中，中间(5)td 是空的，我只希望 2,4,6,8 被 5 接受。

Answer 1

你可以使用类似的东西，

        $('#c tr td').droppable({
           accept: function(ui, item) {
               if($(this).html().trim().length != 0)
                  return false;

               if($(ui).index()==$(this).index())
                 return true;

               var next=$(this).next().get(0);
               var prev=$(this).prev().get(0);
               var me=ui.get(0);

               if(me==next||me==prev)
               return true;

               return false;  
           },
          drop:function (event, ui ) {
                $(this).append(ui.draggable.text());
                $(ui.draggable).empty();   
          }
       });