Question

My html is:

<div id="sortable">
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
</div>

My script is:

$('.node').droppable({
    drop: function (e, ui) {
        alert("drag finish");
    }
});

$('#sortable').sortable({
    stop: function (e, ui) {
        alert("sort finish!");
    }
});

But when I drag an element and sort, it only hits alert("drag finish") but not alert("sort finish").

Why is this happening? How can I solve this problem?

Here is the example http://jsfiddle.net/GRWDR/1/

Answer 1

i myself created a fiddle to test your problem and
see it here it is working fine

notice i load the scripts on dom ready i.e. i think you should enclose your scripts in dom.ready block

$(document).ready(function(){
$('.node').droppable({
                    drop: function (e, ui) {
                        alert("drag finish");
}
                })

$('#sortable').sortable({
                    stop: function (e, ui) {
                        alert("sort finish!");
                    }
                });

});

Hope this help you