jquery sort, drag n drop

[spiderling]

I have set up an admin area for users to sort thumbnail photos, which is within an accordion widget and works well. However, I would like to add the ability for them to drag any photo they want to delete to a trash bin image. This would delete the photo from the sort list and call a PHP script to delete the image from the server and its reference in the database table. For now I was just trying to get the remove to work and then try the PHP call.

What is happening is the thumbnail that is dragged to the trash bin disappears for a second and then goes back to the nearest position.

I've included the JavaScript(jQuery), HTML, and CSS code I am using and would appreciate any help in the right direction.

Thanks.

$(document).ready(function() {
  $('#photolist').sortable({
  revert: true,
  handle: '.handle',
  update: function () {
   var order = $('#photolist').sortable('serialize');
   $.get('sortphotos.php?'+order);
  }
 });
 
 $('.listitem').draggable();
 $('#trash').droppable({
  accept: '.listitem',
  drop: function(e, ui) { 
   $(ui.draggable).remove(); 
  } 
 });
 
 $('#accordion').accordion({
  header: 'div.accordion_title',
  alwaysOpen: false,
  clearStyle: true,
  autoHeight: false
 });
   
});

<DIV id="accordion">
 <DIV><DIV class="accordion_title">Photos:</DIV>
 <DIV>
<BR />
   <DIV id="info">Click and drag image to preferred position.</DIV><div id="trash"><IMG src="/pics/trash.jpg" border="0" alt="Remove photo" /></div>
   <DIV id="photolist">
    <DIV id="listitem_107" class="listitem"><IMG src="/pics/user103/sm/107.jpg" alt="107.jpg" border="0" class="handle" /></DIV>
    <DIV id="listitem_108" class="listitem"><IMG src="/pics/user103/sm/108.jpg" alt="108.jpg" border="0" class="handle" /></DIV>
    <DIV id="listitem_119" class="listitem"><IMG src="/pics/user103/sm/119.jpg" alt="119.jpg" border="0" class="handle" /></DIV>
    <DIV id="listitem_112" class="listitem"><IMG src="/pics/user103/sm/112.jpg" alt="112.jpg" border="0" class="handle" /></DIV>
   </DIV>
 </DIV>
 </DIV>
</DIV>

.accordion_title {
 cursor: pointer;
}
 
#info {
 width: 950px;
 float: left;
 padding: 10px;
 margin: 0px auto 20px auto;
 border: 1px solid #333;
 background-color: #EFEFEF;
}
 
#photolist {
 display: block;
 float: left;
 width: 100%;
 margin: 0px auto 20px auto;
 list-style: none;
}
 
#photolist div {
 width: auto;
 float: left;
 padding: 10px 0px 10px 10px;
 margin-right: 4px;
 margin-bottom: 4px;
 background-color: #EFEFEF;
}
 
#photolist div img.handle {
 margin-right: 10px;
 cursor: move;
}
 
#trash {
 float: right;
 vertical-align: middle;
}