sortable list items to droppable trash

sortable list items to droppable trash


I've been searching for an answer for a couple of days now and have
tried a couple of things I found, but without any success.
I have a sortable list of thumbnail photos that is within an accordion
widget, and would like to be able to drop any of the thumbnails into a
trash bin image. This would remove it from the sortable list and call
a PHP script to delete the image from the server and its reference in
the database table. The closest I've come is the image will disappear
for a quick second and then reappear in the nearest position in the
list.
I've included my jQuery and HTML code. Thanks.
$(document).ready(function() {
$('#photolist').sortable({
revert: true,
handle: '.handle',
update: function () {
var order = $('#photolist').sortable('serialize');
$.get('sortphotos.php?'+order);
}
});
$('#trash').droppable({
accept: '.listitem',
drop: function(event, ui) {
$(ui.draggable).remove('.lisitem');
}
});
$('#accordion').accordion({
header: 'div.accordion_title',
alwaysOpen: false,
clearStyle: true,
autoHeight: false
});
});
HTML:
<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>