jQuery / KonvaJS Sortable

Combines Konva.js images with jQuery sortable grid.

HTML

<script src="https://rawgit.com/konvajs/konva/master/konva.min.js"></script>
<ul id="sortable">
  <li class="circle-tile">1</li>
  <li class="circle-tile">2</li>
  <li class="circle-tile">3</li>
  <li class="circle-tile">4</li>
  <li class="circle-tile">5</li>
</ul>

CSS

#sortable {
   list-style-type: none;
   margin: 0;
   padding: 0;
   width: 350px;
 }

 #sortable li {
   margin: 3px 3px 3px 0;
   padding: 1px;
   float: left;
   width: 100px;
   height: 100px;
   font-size: 4em;
   text-align: center;
   border: 1px solid #ccc;
   background-color: #f3f3ff;
 }

 #sortable li.placeholder {
   background-color: #ff9999;
   border: 1px solid #ff0000;
 }

JavaScript

$("#sortable").sortable({
  items: 'li',
  placeholder: "placeholder",
  stop: function() {
    console.debug('New order:', $(this).sortable('toArray'));
  }
});


var colors = ['red', 'orange', 'yellow', 'green', 'blue'];