jQuery sortable list with images

by jmjpro

HTML

<script src="http://smithgame.com/ext/jquery.ui.touch-punch.min.js"></script>
<img class="endcap" src="http://smithgame.com/res/images/tray-end-cap.png"/><ul class="tray">
<li><img src="http://smithgame.com/res/images/tiles/G.png"/></li><li><img src="http://smithgame.com/res/images/tiles/R.png"/></li><li><img src="http://smithgame.com/res/images/tiles/E.png"/></li><li><img src="http://smithgame.com/res/images/tiles/A.png"/></li><li><img src="http://smithgame.com/res/images/tiles/T.png"/></li>
</ul><img class="endcap" src="http://smithgame.com/res/images/tray-end-cap.png"/>


<!--
<ul class="tray2">
    <li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li>
</ul>
-->

CSS

.gradient {
width: 200px;
height: 200px;
background: #999;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(black));
background: -moz-linear-gradient(top, #CCC, black);
}

img.endcap {
    /*display: inline;*/
    height: 15px;
    width: 15px;
    vertical-align: -70%;
}

ul.tray {
    background: url(http://smithgame.com/res/images/tray-background.png);
    width: 320px;
    height: 70px;
    /*-webkit-padding-start: 15px;*/
    padding-left: 20px;
    display: inline-block;
    border-radius: 5px;
}

ul.tray>li {
    display: inline-block;
}

ul.tray2>li {
    display: inline-block;
    margin: 5px;
}

JavaScript

$( '.tray' ).sortable( {
    start: function(event, ui) { ui.placeholder.html('&nbsp;'); }
}).disableSelection();

$( '.tray2' ).sortable( {
    start: function(event, ui) { ui.placeholder.html('&nbsp;'); }
}).disableSelection();