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();   
          }
       });

Answer 2

如果您想有选择地接受或拒绝元素，请为您的相邻td元素分配一些类或ID，然后执行以下操作：

    $("#c tr td").droppable({
          accept: function(d) { 
              if(d.hasClass("neighbouring_table_element")){ 
                 return true;
              }
          }
   });

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

2 个答案: