SO - 21423117

HTML

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

        
<div class="sort">
    <ul id="sortable">
        <li class="ui-state-default">Title 1</li>
        <li class="ui-state-default">Title 2</li>
        <li class="ui-state-default">Title 3</li>
        <li class="ui-state-default">Title 4</li>
    </ul>
</div>

CSS

.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

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

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

$('.frame').on('dblclick', '.ui-draggable', function () {
    $(this).appendTo(".inventory");
    $(this).draggable("destroy");
    $("img", this).resizable("destroy").attr('style','');
    
});
$(function() {
    var listitems = $('#sortable').children().length;
     var count = 1;
     while (count <= listitems) {
         var title = $(".inventory #"+count+"").attr('title');
         $('#sortable li:contains("Title '+count+'")').text(title);
        count++;
    }

})


$(function() {
    $( "#sortable" ).sortable({
      placeholder: "ui-state-highlight"
    });
    $( "#sortable" ).disableSelection();
  });