JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dl.dropbox.com/u/107346/share/ui-lightness/jquery-ui.css">
<div id="page">
    <div id="topPane">
        <ul id="topSquareList">
            <li><div class="top square">1</div></li>
            <li><div class="top square">2</div></li>
            <li><div class="top square">3</div></li>
            <li><div class="top square">4</div></li>
            <li><div class="top square">5</div></li>
            <li><div class="top square">6</div></li>
            <li><div class="top square">7</div></li>
            <li><div class="square">8</div></li>
        </ul>
    </div>
    <div id="bottomPane">

    </div>
</div>

CSS

body
{
    list-style:none;
    overflow:hidden;
}

#page
{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#fff;
    overflow:hidden;
}

#topPane
{
    position:absolute;
    left:10px;
    right:10px;
    top:10px;
    bottom:167px;
    background-color:#ccc;
    overflow:hidden;
    padding:10px;
}

#topSquareList
{
    position:absolute;
    top:10px;
    bottom:10px;
    left:10px;
    right:10px;
    font-size:0;
    padding:2px;
    background-color:#555;
    overflow-x:hidden;
    overflow-y:scroll;
}

#topSquareList li
{
    margin:2px;
    display:inline-block;
}

#bottomPane
{
    position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    background-color:#ccc;
    height:147px;
}

#bottomPane
{
    font-size:0;
    padding:2px;
    background-color:#555;
    white-space:nowrap;
    overflow:scroll;
    overflow-y:hidden;
}

#bottomPane div
{
    display:inline-block;
    margin:2px;
    vertical-align:top;
    
}

.square{
    background-color:red;
    width:100px;
    height:100px;
    border:1px solid #ccc;
    font-size:16px;
    color:#fff;
    text-align:center;
}


.squarePlaceholder
{
    background-color:#ccc;
    width:100px;
    height:100px;
    border:1px solid #fff;
    font-size:16px;
    color:#fff;
    text-align:center;
}

JavaScript

$(document).ready(function() {
    
    $(".square").mouseenter(function () {
    
        var scaleFactor = 1.2;
        var offset = $(this).offset();
        
        //calculate new size and position
        var width = $(this).width() * scaleFactor;
        var height = $(this).height() * scaleFactor;
        var left = offset.left + ($(this).width() - width) / 2;
        var top = offset.top + ($(this).width() - height) / 2;
    
        $(this)
            .clone()
            .addClass("zoomHelper")
            .css({
                "position": "absolute",
                "width": width,
                "height": height,
                "left": left,
                "top": top
            })
            .appendTo("body")
            .draggable({
                revert: 'invalid',
                helper: 'clone'
            })
            .mouseleave(function(){
                $(this).remove();
            });
    });
    


    $("#bottomPane").droppable({
        accept: ".zoomHelper",
        tolerance: "touch",
        drop: function (event, ui) {
            ui.draggable.clone().css({position:"static"}).unbind("mouseenter").removeClass("zoomHelper").draggable("disable").appendTo(this);
        }
    }).sortable({
        axis: "x",
        placeholder: "squarePlaceholder"
    });
});