droppable onDrop Event on ul and li

[suweisi]

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.

[stworthy]

When start dragging an object, retrieve all the droppable objects and then adjust their position.

Code:

$('#dd').draggable({
	onStartDrag: function(){
		var droppables = $(this).data('draggable').droppables;
		droppables.sort();
	}
})
$("#sortable-list,.item").droppable({
	onDrop : function(e, source) {
		console.log(e.target)
		e.stopPropagation();
	}
});

[suweisi]

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