spiderling 0 Newbie Poster

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.


$(document).ready(function() {
  revert: true,
  handle: '.handle',
  update: function () {
   var order = $('#photolist').sortable('serialize');
  accept: '.listitem',
  drop: function(e, ui) { 
  header: 'div.accordion_title',
  alwaysOpen: false,
  clearStyle: true,
  autoHeight: false
<DIV id="accordion">
 <DIV><DIV class="accordion_title">Photos:</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>
.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;
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.