Draggable Grid with touch

by dirkk0

HTML

<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>
<div style="width:520px">
    <ul id="items">
        <li class="list">
            <img src="http://lorempixel.com/80/80/animals/1" />
            <li class="list">
                <img src="http://lorempixel.com/80/80/animals/2" />
            </li>
            <li class="list">
                <img src="http://lorempixel.com/80/80/animals/3" />
            </li>
            <li class="list">
                <img src="http://lorempixel.com/80/80/animals/4" />
            </li>
    </ul>
</div>

CSS

.list {
    background-color:pink;
    font-size:30px;
    text-align:center;
    cursor:pointer;
    font-family:Geneva, Arial, Helvetica, sans-serif;
}
#items .ui-selected {
    background: red;
    color: white;
    font-weight:bold;
}
#items {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#items li {
    float:left;
    margin: 2px;
    padding: 2px;
    width:80px;
    height:80px;
    line-height:50px;
}
.highlight {
    font-weight:bold;
    font-size:50px;
    background-color:lightblue;
}

JavaScript

$(function () {
    $("#items").sortable({
        start: function (event, ui) {
            ui.item.toggleClass("highlight");
        },
        stop: function (event, ui) {
            ui.item.toggleClass("highlight");
        }
    });
    $("#items").disableSelection();
});