jQuery UI: Sortable Lists

I'm new in jQuery and I would like to create a drag and drop HTML builder. I have 2 divs: in the first I have pictures that represents HTML blocks in the other div I would like to have a sortable list with the divs that corresponds to the dropped picture.

by dixalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.4/tinysort.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.4/tinysort.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<ol id="sortable1" class="connectedSortable ol">
  <li class="ui-state-default li">Item <span class='listNum'></span>
    <img id="img01" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="1" />
  </li>
  <li class="ui-state-default li">Item <span class='listNum'></span>
    <img id="img02" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="2">
  </li>
</ol>

<ol id="sortable2" class="connectedSortable ol">

</ol>
<button id='sort'>Sort by Title Value</button>

CSS

img {
  width: 150px;
  clear: both;
  display: block;
}
#img02 {
  border: solid 3px #ACE;
}
#img01 {
  border: solid 2px #FF0;
}
button {
  clear: both;
  width: 404px;
  height: 20px;
  display: inline-block;
}
div#sortable1,
div#sortable2 {
  float: left;
  clear: none;
  padding-left: 25px;
  margin: 0;
}
div#sortable1 {
  float: left;
  clear: none;
  list-style-type: none;
}
div#sortable1,
div#sortable2 {
  min-height: 175px;
  max-width: 175px;
  min-width: 175px;
  border: solid 1px #000;
}
.ui-state-highlight {
  border: solid 1px #ACE;
  height: 45px;
  background-color: yellow;
}

JavaScript

var origSort1 = $('#sortable1').html();
var origSort2 = $('#sortable2').html();

$('button#sort').on("click", function(e) {
  e.preventDefault();
  triggerSort();
});

//http://stackoverflow.com/a/8584217/5076162
(function($) {
  $.fn.changeElementType = function(newType) {
    this.each(function() {
      var attrs = {};

      $.each(this.attributes, function(idx, attr) {
        attrs[attr.nodeName] = attr.nodeValue;
      });

      $(this).replaceWith(function() {
        return $("<" + newType + "/>", attrs).append($(this).contents());
      });
    });
  };
})(jQuery);

$("ol").changeElementType("div");
$("li").changeElementType("div");

function triggerSort() {
  if ($('#sortable2 .li').length > 0) {
    tinysort('#sortable2>.li', {
      selector: 'img',
      attr: 'title'
    });
    numberItems();
    removeNumberedItems();
  } else {
    return false;
  }
}

$(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    placeholder: "ui-state-highlight"
  }).disableSelection();
});

$('#sortable2').on('mouseenter, mouseoutm mousemove', function() {
  numberItems();
});

$('#sortable1').on('mousemove', function() {
  removeNumberedItems();
});

function numberItems() {
  $('#sortable2').find($('.listNum')).each(function(i) {
    $(this).text(i + 1);
  });
}

function removeNumberedItems() {
  $('#sortable1').find($('.listNum')).each(function(i) {
    $(this).text("");
  });
}