jquery sortable does not work as expected
<p>I am trying to create a page and let the user upload pictures. Thumbnails of the pictures are shown on the page as soon as they are uploaded. I want the user to be able to change the order of the pictures after upload. The thumbnails are img elements added to a div horizontally.</p>

<p>With jquery sortable it almost works. But sometimes, when I want to move one of the pictures to the right (or the left), I have to play a little with the mouse until the next picture 'jumps' to show the empty space where I could drop.</p>

<p>Any idea why this happens ?</p>

<p>Thank you !</p>

<p>Edit:</p>

<p>CSS:</p>

<pre><code>.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;
}
</code></pre>

<p>JS:</p>

<pre><code>$("#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 &lt; container.childNodes.length; i++) {  // one child
            child = container.childNodes[i];
            child.id = "picture" + pictures++;
            picContainer.append(child);
            $("#pictureContainer").sortable("refresh");
      }
    }
});
</code></pre>

<p>The div holding the pictures is initially empty:</p>

<pre><code>&lt;div id="pictureContainer" class="containerClass"&gt;
&lt;/div&gt;
</code></pre>

<p>As response from the server, after the picture was uploaded, I receive:</p>

<pre><code>&lt;img class="uploadedPicture" alt="" src="'.$picturePath.'" width="150" height="150"/&gt;
</code></pre>

<p>Of course width and height, will be replaced with the real width and height of the thumbnail I want to show.</p>
