jQuery / KonvaJS Sortable with Fixed Items

Combines Konva.js images with jQuery sortable grid. Source: http://stackoverflow.com/a/6131590/1093087

HTML

<script src="https://rawgit.com/konvajs/konva/master/konva.min.js"></script>
<ul id="sortable">
    <li class="circle-tile static">gray</li>
    <li class="circle-tile">red</li>
    <li class="circle-tile">orange</li>
    <li class="circle-tile">yellow</li>
    <li class="circle-tile static">gray</li>
    <li class="circle-tile">green</li>
    <li class="circle-tile">blue</li>
</ul>

CSS

#sortable {
     list-style-type: none;
     margin: 0;
     padding: 0;
     width: 100px;
 }
 #sortable li {
     margin: 3px 3px 3px 0;
     padding: 1px;
     width: 40px;
     height: 40px;
     font-size: 2em;
     text-align: center;
     border: 1px solid #ccc;
     background-color: #f3f3ff;
 }
 #sortable li.placeholder {
     background-color: #ff9999;
     border: 1px solid #ff0000;
 }
 #sortable li.static {
     background-color: #333333;
 }

JavaScript

$("#sortable").sortable({
  
    placeholder: "placeholder",
    start: function () {
        $('.static', this).each(function () {
            var $this = $(this);
            $this.data('pos', $this.index());
        });
    },
    change: function () {
        $sortable = $(this);
        $statics = $('.static', this).detach();
        $helper = $('<li></li>').prependTo(this);
        $statics.each(function () {
            var $this = $(this);
            var target = $this.data('pos');

            $this.insertAfter($('li', $sortable).eq(target));
        });
        $helper.remove();
    },
    update: function () {
        console.debug('New order:', $(this).sortable('toArray'));
    }
});
$("#sortable").disableSelection();

$('ul#sortable li').each(function (n, li) {
    var circleColor = $(li).text();
    var containerId = 'container-' + n;
    var $stageContainer = $('<div />').attr('id', containerId);

    $(li).attr('id', circleColor).html($stageContainer);

    var stage = new Konva.Stage({
        width: 40,
        height: 40,
        container: containerId
    });
    var layer = new Konva.Layer();
    stage.add(layer);

    var circle = new Konva.Circle({
        x: 20,
        y: 20,
        radius: 18,
        fill: circleColor,
        stroke: 'black',
        strokeWidth: 2
    });
    layer.add(circle);
    layer.draw();
});