How to catch dragend event in JavaScript?

Question

I'm trying to catch the dragend event in JavaScript for a draggable DIV. The dragend event is not fired at all, why ? and how to solve this ? PS, I'm using .draggable() method from: jQuery UI 1.9.2

Here's my code: http://jsfiddle.net/vBMav/

HTML:

<div id="divId"> ... </div>

CSS:

#divId {
    background-color: #000000;
    color: #ffffff;
    height: 200px;
    width: 200px;
}

Javascript:

$('#divId').draggable(); 

$('#divId')
    .bind('dragstart', function(){ $("#divId").text("drag start"); })
    .bind('drag',      function(){ $("#divId").text("dragging");   })
    .bind('dragend',   function(){ $("#divId").text("drag ended"); });

Solution

Try using dragstop instead of dragend

.bind('dragstop',   function(){ $("#divId").text("drag ended");});

Comments

[Jacob]

That is the correct use as written in the documentation: api.jqueryui.com/draggable

[Jon Carter]

In the jQuery documentation, true, but why doesn't jQuery use the 'dragend' event, which as far as I can tell is in the HTML5 standard while 'dragstop' is not?

[r3wt]

@JonCarter because the standards committee of javascript are a bunch of haphazard crackpots, who implement specs on a whim and rush them through.jQuery has always been about maximizing productivity and a means disambiguate the various flaws and discrepancies in the implementation(s) that have arisen as a result of this culture.to summarize, dragstart and dragstop are logical naming conventions. in fact, i found this answer by googling jQuery dragstart dragstop because i didn't know what the name of the events were and needed to double check.