Avatar UI 5 Grid

by raskalbass

HTML

<div class="frame"></div>
<div id="grid" class="inventory">
    <img id="1" class="5" src="http://www.i2clipart.com/cliparts/d/5/f/5/clipart-fall-leaf-d5f5.png" alt="" title="Leaf">
    <img id="2" class="1" src="http://www.i2clipart.com/cliparts/c/c/d/f/clipart-race-car-ccdf.png" alt="" title="Car">
    <img id="3" class="3" src="http://www.i2clipart.com/cliparts/f/4/7/3/clipart-diamonds-f473.png" alt="" title="Gems">
    <img id="4" class="1" src="http://www.wonderweirded.com/images/valentine-heart-clipart-cartoon-heart-1050.gif" alt="" title="Heart">
</div>
<div class="sort">
    <ul id="sortable"></ul>

CSS

.test {
    position: absolute;
    top: 320px;
    right: 0px;
}
.frame {
    background-color: orange;
    position: absolute;
    left: 0px;
    top: 0px;
    height : 300px;
    overflow:hidden;
    width: 400px;
}
.frame img {
    position: relative;
    height : 50px;
    width: 50px;
    left: 100px;
    top: 100px;
}
.inventory {
    background-color: yellow;
    position: absolute;
    left: 0px;
    top: 320px;
    height : 300px;
    overflow:hidden;
    width: 400px;
}
.inventory img {
    height: 60px;
    width: 60px;
    float: left;
    padding: 5px;
}
.sort {
    float: right;
    top: 0px;
    background-color: green;
    height: 300px;
    width: 400px;
}
#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 40%;
}
#sortable li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: .8em;
    height: 1.5em;
    line-height: 1.2em;
}
.ui-state-highlight {
    height: 1.5em;
    line-height: 1.2em;
}

JavaScript

function zindex() {
    var title = "";
    var i = 9999;
    $(".ui-state-default").each(function () {
        i--;
        title = $(this).text();
        $(".frame img[title='" + title + "']").parent().css("z-index", i);
    });
}
$("#sortable").mous

$('.inventory').on('click', 'img', function () {
    $(this).resizable({
        aspectRatio: 1,
        autoHide: true,
        containment: "parent",
        minHeight: 50,
        minWidth: 50
    });

    $(this).parent().appendTo(".frame").draggable({
        containment: "parent",
        cursor: "move"
    });

    refreshIndexList();
    zindex();
});

//Double Click out of Frame
$('.frame').on('dblclick', '.ui-draggable', function () {
    $(this).appendTo(".inventory");
    $(this).draggable("destroy");
    $("
    $("#sortable").sortable({
        placeholder: "ui-state-highlight"
    });
    $("#sortable").disableSelection();
});

//Inventory Grid
$(function () {
    $("#grid").sortable();
    $("#grid").disableSelection();
});