jQuery Droppable drop事件函数未运行

Question

我正在创建一个列表，用户可以通过将文本拖动到小方框来更新订单。我使用jQuery而不是HTML输出大部分DOM。目前这些物品是可拖动的，我说当一个物品被拖到一个盒子里但没有骰子时会显示警告。以下是我的代码，有人可以告诉我，如果我做错了吗？

$('.sequence_option').draggable();

  $('.sequencing').append('<div class="sequence_boxes"></div>');

  $('.sequence_option').each(function(i) {
    $('<div class="box"></div>').appendTo($('.sequence_boxes'));

  });


$(".box").droppable({
    accept: ".sequence_option",
    drop: function(ev, ui) {
      alert("dropped");
    }
  });

Answer 1

很难知道，因为你没有发布你的CSS，但答案可能是你的.sequence_option元素的样式没有宽度有限。默认情况下，像div这样的块元素跨越其容器宽度的100％。除非您将droppable的公差设置为接受较小的重叠，否则您的.sequence_option可拖动元素可能未完全包含在.box可放置的内容中。

修改

Fiddle demo

删除width上的CSS .sequence_option声明，以观察容器的宽度跨度和未触发的丢弃。

.box {
    width: 50px;
    height: 50px;
    background: #666;
    margin: 10px;
}

.sequence_option {
    /* Remove this line to watch it break */
    width: 25px;
    height: 25px;
    margin: 10px;
    border: 1px solid #333;
}