Question

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.

My problem is that the button to perform the sort() 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.

This is the 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();
}

http://jsfiddle.net/gkKHN/3/

Answer 1

http://jsfiddle.net/gkKHN/6/

just move sort() outside the $() since you are just declaring the function, and not doing anything when the DOM loads