Draggable Gallery

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://www.sethcohen.net/alphabet/brochureToolV2.css">
<script src="http://www.sethcohen.net/alphabet/brochureToolV2.js"></script>
Drag an image into a slot on the template. Click the X to remove it. <input type=button value='Toggle overflow' onclick=toggleOverflow();><div style='display:inline;' id='overflowMessage'>Overflow-y:visible</div>
 
<div id="templateEditorContainer">
    <!--set up the gallery-->
    <!-- the gallery div needs to handle its own scrolling programatically. setting its overflow to scroll will screw up the drag; the div still scrolls when it drags, so the tile appears to be behind the brochure.
    so we keep the overflow visible, which has a z-index lower than the brochure so 'overflowed' tiles remain out of site. we 'scroll' it by providing buttons which adjust the margins, exactly
    like the brochure imagedrop itself is managed. -->
    
<div id="gallery">
        <!--IE earlier than 9 (Trying to support 8 here...) cannot use the css3 background-size property, so it has to use a DXImageTransform 
       Though I might use image magick to resize images on the fly instead, or possibly have them resized automatically during The Pull, or use image slider tile guys we have for
       the future site.-->
                                <!-- change the 16 to multiples of 4 or other numbers to affect the "squarification" of gallery thumbs-->
                        <div class="galleryTile border1 ui-draggable" id="galleryImage0" data-img="a.jpg" style="background-image: url(&quot;http://www.sethcohen.net/alphabet/a.gif&quot;); z-index: 0;">

            </div>
                                            <!-- change the 16 to multiples of 4 or other numbers to affect the "squarification" of gallery thumbs-->
                        <div class="galleryTile border1 ui-draggable" id="galleryImage1" data-img="b.jpg"...

CSS

div#gallery{
    width:940px;
    overflow-x:visible;
    padding:0 0 0 0;
    height:210px;
    margin:0px 0px;
    float:left;
    border:none;
    position:relative;
    overflow-y:visible;
    height:210px;
}

div#templateEditorContainer{
    width:1000px;
    overflow:hidden;
}

div#templateEditor{
    width:990px;
    float:left;
    height:471px;
    
}

div#imageDropContainer{
    width:990px;
    height:481px;
    overflow:hidden;
    position:relative;
}

JavaScript

function prepTileForDragging()
    {
        //grab the image

        //fix the z-index
        //jQuery(".galleryTile").css('z-index', '100');
        // jQuery(this).css('z-index', '200');
        //set the currently dragged item
        currentImage = jQuery(this).css('background-image');
        currentImageFileOnly = currentImage.replace("url(", "").replace(")", "").replace(/\'/g, "").replace(/\"/g, "");
        // alert(currentImageFileOnly.replace(/"/g,""));
        currentTileNumber = jQuery(this).data('id');
        currentImageName = jQuery(this).data('img');

    }

 //attach droppable to the correct children of a parent div
    function setChildrenDroppable(parent) {

        parent.find("div:not(.tile1x2FullContainer):not(.tile2x1FullContainer):not(.tileCoverMiddleFull):not(.tileCoverBottomContainerFull):not(.tileCoverBottomContainerFull div):not(.BGFull2x1Text)").droppable({
            over: function(event, ui) {
                jQuery(this).data('oldBackground', jQuery(this).css("background-image"));
                jQuery(this).data('oldFilter', jQuery(this).css("filter"));
                //  if (console!==undefined) {console.log(currentImageName);}
                console.log("old background" + jQuery(this).data('oldBackground'));
                console.log("old filter" + jQuery(this).data('oldFilter'));
                //    jQuery(this).css("background-image",currentImage);
                //for IE 8, we have to use the filter property
                jQuery(this).css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + currentImageFileOnly + "', sizingMethod='scale')");
                jQuery(this).css('background-image', currentImage);

                //ok, now here is the tricky part. insert an overlay div
                jQuery(this).append('<div id="theOverlayDiv"></div>');

            },
            out: function(event, ui) {
                console.log("out!");
                //   ...