jquery ui drop event did not fire for last li item between 2 lists

Question

I am using a draggable and droppable UL LI items that makes it possible to drop the list items from one to another. When an item is dropped I need to handle them using jquery-ui droppable drop event. This works for all the items excepts the last LI element in the List.

My HTML code:

<ul class="ui-helper-reset">
  <li id="event-start1" class="ui-state-default">
      List Item 1
  </li>
  <li id="event-drag1" class="ui-state-default">List item 2</li>
  <li id="event-stop1" class="ui-state-default">
      List Item 3
  </li>
</ul>
<br />
<ul class="ui-helper-reset">
  <li id="event-start2" class="ui-state-default">
      List Item 1
  </li>
  <li id="event-drag2" class="ui-state-default">List item 2</li>
  <li id="event-stop2" class="ui-state-default">
      List Item 3
  </li>
</ul>

My javascript code:

$(function () {
$(".ui-state-default").draggable({
    helper:'clone',
    cursorAt:{top:-10,left:-10},
    stop:function(event, ui){
        alert(event.originalEvent.target.id)
    }
});
$(".ui-helper-reset li").droppable({
    drop: function (event, ui) {
        if ($(event.originalEvent.target).hasClass("ui-droppable"))
            alert("drop");
    }
});
});

http://jsfiddle.net/b7j2k1Ln/22/

Why is the event not triggered for the last LI and how to resolve this? Thanks in advance