Untitled

jquery sortable does not work as expected
.containerClass{
  float: left;
  width: 42.55em;
  padding: 0.6em 1em 0.3em 0.95em;
}

.uploadedPicture {
  float: left;
  border-style: double;
  padding: 1px;
  margin: 0.2em 0.2em 0.2em 0.2em;
  cursor: move;
}

$("#pictureContainer").sortable({cursor: "move", distance: 10,  helper: 'original', items: 'img', opacity: 0.4});

new AjaxUpload('pictureContainer', {
    action: 'upload.php',
    name: 'picture',
    responseType: false,
    autoSubmit: true,
    onComplete: function(file, response) {
      picContainer = $('#pictureContainer');
          pictures = picContainer[0].childNodes.length;
          container = document.createElement('div');
      container.innerHTML = response;
      for (var i = 0; i < container.childNodes.length; i++) {  // one child
            child = container.childNodes[i];
            child.id = "picture" + pictures++;
            picContainer.append(child);
            $("#pictureContainer").sortable("refresh");
      }
    }
});

<div id="pictureContainer" class="containerClass">
</div>

<img class="uploadedPicture" alt="" src="'.$picturePath.'" width="150" height="150"/>