title: Sorting images function isn't working after dragging letters in display
body: <p>I have a piece of code which allows for the letters to be dragged onto a white square, and I have a function that sorts them in alphabetical order.</p>
  
  <p>My problem is that the button to perform the <code>sort()</code> function isn't working: When I drag images around, I want to click the button and have it sort. However, nothing happens when I click the button to sort.</p>
  
  <p>This is the code:</p>
  
  <pre><code>$(function sort(){
      var order = ['a', 'b', 'c', 'd','e','f', 'g','h'];
  
      $('img').parent().each(function(x) {
          $('#'+order[x]).appendTo($(this));
      });
  });
  
  function drag(ev) {
      ev.dataTransfer.setData("Text", ev.target.id);
  }
  function drop(ev) {
      var id = ev.dataTransfer.getData("Text");
      if (!$(ev.currentTarget).find("img")[0])
          ev.target.appendChild(document.getElementById(id));
      ev.preventDefault();
  }
  function allowDrop(ev) {
      ev.preventDefault();
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/gkKHN/3/" rel="nofollow">http://jsfiddle.net/gkKHN/3/</a></p>