facebook flare type app

facebook flare type app


im trying to create a cork board application much like facebook's
flare app. basically there are two divs (#picker, #board). the user
selects an images/icon from the #picker div and drags it onto the
#board div. once the image has been dragged onto the #board i want the
element to be draggable within the #board div so the user can add as
many images to the board as he/she wants and more them around to set
up a sort of scrap book type feel. any image within the #board should
also come to the front when selected (z-index). the user can then save
the current state of the board and allow others to see it.
the save function was built via PHP and it simply stores the src, z-
index, and position (top, left) of the image into a MySQL database so
it can be loaded in the same spot next time the app is loaded.
i manually added a few images in the database to test the loading and
saving functions and they work fine. but the ui is not working
correctly.
heres what i have so far with comments:
<code>
$(document).ready(function() {
    // all images in #board that loaded from the db need to be draggable
    $(".dragImage").draggable({
        containment: 'parent',
        cursor: 'move'
    });
    // images in the #picker that are dropped into the #board
    $(".dropImage").draggable({helper: "clone"});
    // the container to recieve the images being drag-dropped
    $("#board").droppable({
        accept: ".dropImage",
        activeClass: "droppable-active",
        hoverClass: "droppable-hover",
        // drop function
        drop: function(e, ui) {
            // change the image being dropped to a dragImage
            $(ui.draggable).attr({class: "dragImage"});
            // add the draggablility to it
            $(ui.draggable).draggable({
                containment: 'parent',
                cursor: 'move'
            });
            // add it to the #board div
            $(this).append($(ui.draggable));
        }
    });
});
var zmax = 0;
// when a dragable image is clicked, detect the curent highest
// z-index and set the clicked image to that value + 1
$('.dragImage').click(function() {
    $(this).siblings('.dragImage').each(function() {
        var cur = $(this).css('zIndex');
        zmax = cur > zmax ? $(this).css('zIndex') : zmax;
    });
    $(this).css('zIndex', (zmax*1)+1);
});
</code>