Javascript jQuery可拖放事件函数未运行

我正在创建一个列表，用户可以通过将文本拖动到小框中来更新订单。我使用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");
    }
  });

$（'.sequence_option'）.draggable（）；
$（'.sequencing'）。追加（''）；
$（'.sequence_option'）。每个（函数（i）{
$（''）.appendTo（$（'.sequence_-box'）；
});
$（“.box”）.可拖放({
接受：“.sequence_选项”，
下拉：功能（ev、ui）{
警惕（“放弃”）；
}
});

很难知道，因为您没有发布CSS，但答案可能是您的

.sequence\u选项

元素的样式宽度不受限制。默认情况下，块元素（如

div

s）跨越其容器宽度的100%。除非您将

可拖放

的公差设置为接受较小的重叠，否则您的

.sequence\u选项

可拖放元素很可能未完全包含在

.box

可拖放中

编辑

删除

.sequence\u选项

上的CSS

width

声明，以查看容器的宽度，并且不会触发拖放

.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;
}

---

看起来你的下降警报做得不错。从您的代码中查看此小提琴示例。您希望在将项目拖动到框中或将项目拖放到框中时显示警报吗？您正在使用drop事件，因此当您拖动到框中时，它不应触发。但是，当您释放鼠标按钮并执行drop功能时，drop事件应触发，警报应显示为@Matt的上述示例。