jQueryUI - Sortable items

by katalin_2003

HTML

<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>
<ul id="sortable">
    <li class="ui-state-default" id="bl1">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
</ul>

CSS

#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#sortable li {
    margin: 3px 3px 3px 0;
    padding: 1px;
    float: left;
    width: 100px;
    height: 90px;
    font-size: 4em;
    text-align: center;
    border: solid 1px #333;
    background-color: pink;
}

JavaScript

$("#sortable").sortable({
    opacity: 0.5,
    stop: function (event, ui) {
//        console.log("stop");
// position where the object was dropped
        console.log(ui.position);
    }
});
// deprectaed, use CSS user-select: none
// $( "#sortable" ).disableSelection();

// Load jQuery UI Touch Punch - to make it work on touch devices