Sorting images function isn't working after dragging letters in display
<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>
