title: how to make images resortable?
body: <p>I have done PHP code part(images uploading to server side module)
  My problem is the front side UI part. so far I got</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var abc = 0;     
  $(document).ready(function() {
  $('#add_more').click(function() {
      $(this).before($("&lt;div/&gt;", {
          id: 'filediv'
      }).fadeIn('slow').append($("&lt;input/&gt;", {
          name: 'file[]',
          type: 'file',
          id: 'file'
      }), $("&lt;br/&gt;")));
  });
  
  $('body').on('change', '#file', function() {
      if (this.files &amp;&amp; this.files[0]) {
         abc += 1; // Incrementing global variable by 1.
         var z = abc - 1;
         var x = $(this).parent().find('#previewimg' + z).remove();
         $(this).before("&lt;div id='abcd" + abc + "' class='abcd'&gt;
                    &lt;img id='previewimg" + abc + "' src=''/&gt;&lt;/div&gt;");
         var reader = new FileReader();
         reader.onload = imageIsLoaded;
         reader.readAsDataURL(this.files[0]);
         $(this).hide();
         $("#abcd" + abc).append($("&lt;img/&gt;", {
          id: 'img',
          src: 'x.png',
          alt: 'delete'
         }).click(function() {
          $(this).parent().parent().remove();
         }));
      }
  });
  
  function imageIsLoaded(e) {
      $('#previewimg' + abc).attr('src', e.target.result);
  };
  $('#upload').click(function(e) {
      var name = $(":file").val();
      if (!name) {
          alert("First Image Must Be Selected");
          e.preventDefault();
      }
  });
  </code></pre>
  
  <p>});
        </p>
  
  <pre><code>&lt;form action=""  method="post" enctype="multipart/form-data"&gt;
  &lt;div id="filediv"&gt;
  &lt;input type="file" id="file" name="file[]" multiple /&gt;&lt;/div&gt;&lt;br /&gt;
  &lt;input type="button" id="add_more" class="uploading" value="Add More Files"/&gt;
  &lt;input type="submit" value="Upload File" name="upload" class="uploading"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>How to resort images that users just added/drag and dropped?
  and if possible, enable to drag/drop multiple images instead of doing one-by-one. I am sorry if I am asking little too much, I am not that good at jQuery/javascript. </p>