This works, but it seems to be strange, why the ul get the onDrop event fired before li onDrop event fired?

html
  <ul id="sortable-list">
     <li class="item">test</li>
  </ul>
js
  $("#sortable-list,.list").droppable({
        onDrop : function(e, source) {
      alert(e.target)
        }
  });

The result is the ul#sortable-list onDrop event be fired, shows target element UL, the li .item onDrop event not fired any more, why is this?

I could want if the li.item's onDrop event be fired, and then the ul's onDrop not fired. How to do this?

Thanks.