Question

我正在制作一个国际象棋棋盘，并试图找到该棋子被丢弃的桌子元素。不幸的是，掉落事件似乎根本没有发射。

$('.piece').draggable();
$('.pieces').droppable({
  drop: function(){
    alert($(this).attr('id')); // should give me the number of the field
  }
});

这是我到目前为止，有人可以告诉我为什么掉落事件没有被解雇？

Answer 1

$(document).ready(function(){
    $('.piece').draggable();
    $('.field').droppable({
        drop: function(){
            alert($(this).attr('id'));
        }
    });
});

并将其添加到css：

.field {
    height:100%;
}

请参阅demo

Answer 2

棋盘正方形中的div元素将为零高度。因此，当你放下正方形时，你会击中td元素 - 而不是微小的div。

尝试添加CSS

.tile {
    height: 100%;
}

并将等级磁贴添加到div中，使它们变为

<td><div id="0" class="field"></div class="tile"></td>

然后将代码更改为

$('.piece').draggable();
$('.tile').droppable({
  drop: function(){
    alert($(this).attr('id')); // should give me the number of the field
  }
});

您犯的错误是假设div元素将填充其父元素。你在这方面做得很好。我读到有关调试div的一个重要提示是将背景颜色应用于div，以便获得视觉反馈，表明它的行为正如您所期望的那样 - 非常值得。

Answer 3

它与需要高度的div有关或者删除div并使用td上的ID和类

Answer 4

你的droppable元素有id =“pieces”，而不是class =“pieces”。

尝试在droppable元素上使用#board或#pieces

找到掉落的元素

4 个答案: