Sortable elements don't interact with droppable elements. Try making the thumbnails draggable as well.
On Jan 31, 8:55 pm, spiderling <[email protected]> wrote: > Is there someone that could please, please help with this? I have > viewed many versions of similar sample code, which seem simple enough, > and cannot seem to figure out why mine isn't working. Some help would > be very, very much appreciated. I'm a somewhat desperate, and don't > mind begging for some help at this point. > > Thanks in advance. > > On Jan 28, 12:00 am, spiderling <[email protected]> wrote: > > > 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> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
