jQuery Droppable drop event function not running

Question

I'm creating a list where the user can update the order by dragging text into small boxes. I'm outputting most of the DOM using jQuery instead of HTML. Currently the items are draggable, and I stated to show an alert when an item is dragged inside a box, but no dice. Below is my code, can some one tell me if I'm doing something wrong?

$('.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

It's hard to know since you didn't post your CSS, but the answer is probably that your .sequence_option elements aren't styled to have a limited width. By default block elements like divs span 100% of their container width. Unless you set your droppable's tolerances to accept smaller overlaps, it's probable that your .sequence_option draggable elements aren't being completely contained within the .box droppable.

EDIT

Fiddle demo.

Remove the CSS width declaration on .sequence_option to watch the width span the container and the drop not get triggered.

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