Adding sort functionality to image drag and drop

Adding sort functionality to image drag and drop

This post is an edited version of my original one.  I've got an image drag and drop piece that displays a thumbnail gallery (div of #thumbnails).  Then the user can drag and drop them into a viewer (div of #viewer) area where they will auto-expand.  I just modified (maybe butchered is a better word) the jQuery UI simple photo manager code.  That was just fine until the new requirement of being able to sort/rearrange the images in the viewer area came about.

I am having difficulty envisioning how this would be done using the current code.  All of my attempts with using the jQuery UI sortable options have been unsuccessful so far, which is likely due to the fact that I'm still learning it.  Mainly, I'm unsure of WHERE to put the sortable code and how it affects the other pieces.  Any help is appreciated.  Here's the current state of things:

HTML:

<div class="demo ui-widget ui-helper-clearfix">

<p>Drag the images to the gray area below to enlarge.</p>


<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<img src="images/xray1.jpg" alt="1st xray image" width="96" height="96" />
</li>
<li class="ui-widget-content ui-corner-tr">
<img src="images/xray2.jpg" alt="2nd x ray image" width="96" height="96" />
</li>
<li class="ui-widget-content ui-corner-tr">
<img src="images/xray3.jpg" alt="3rd x ray image" width="96" height="96" />
</li>
</ul>

<div id="viewer" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header">To remove an image, click the icon located at the bottom right.</h4>
</div>


</div>

JavaScript

<script>
$(function() {
// there's the gallery and the viewer
var $gallery = $( "#gallery" ),
$viewer = $( "#viewer" );

// let the gallery items be draggable
$( "li", $gallery ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
helper: "clone",
cursor: "move"
});

// let the viewer be droppable, accepting the gallery items
$viewer.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
resizeImage( ui.draggable );
}
});

// let the gallery be droppable as well, accepting items from the viewer
$gallery.droppable({
accept: "#viewer li",
activeClass: "custom-state-active",
drop: function( event, ui ) {
recycleImage( ui.draggable );
}
});
// image resize function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Click to return image to thumbnails' class='ui-icon ui-icon-refresh'>Recycle image</a>";
function resizeImage( $item ) {
$item.fadeOut(function() {
var $list = $( "ul", $viewer ).length ?
$( "ul", $viewer ) :
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $viewer );
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
$item
.animate({ width: "300px" })
.find( "img" )
.animate({ height: "300px" });
});
});
}

// image recycle function
function recycleImage( $item ) {
$item.fadeOut(function() {
$item
.find( "a.ui-icon-refresh" )
.remove()
.end()
.css( "width", "96px")
.find( "img" )
.css( "height", "96px" )
.end()
.appendTo( $gallery )
.fadeIn();
});
}

// resolve the icons behavior with event delegation
$( "ul.gallery > li" ).click(function( event ) {
var $item = $( this ),
$target = $( event.target );

if ( $target.is( "a.ui-icon-trash" ) ) {
resizeImage( $item );
} 
else if ( $target.is( "a.ui-icon-refresh" ) ) {
recycleImage( $item );
}

return false;
});
});
</script>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>

CSS

#gallery {min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: right; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }

#viewer { min-height: 18em; width: 640px; height: 800px; padding: 1%;} * html #viewer { height: 18em; } /* IE6 */
#viewer h4 { line-height: 16px; margin: 0 0 0.4em; }
#viewer h4 .ui-icon { float: left; }
#viewer .gallery h5 { display: none; }