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: /
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"); });
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"); });
2 Answers
Reset to default 14Try using dragstop instead of dragend
.bind('dragstop', function(){ $("#divId").text("drag ended");});
In JavaScript and jQuery, when the user stops dragging the cursor, the event fired is: dragend.
In jQuery UI, after calling .draggable();, when the user stops dragging the cursor, the event fired then becomes: dragstop. (Small demo showing that dragstop no longer works when .draggable() isn't called.)
Documentation...
JavaScript - dragend: Searching google for this produces about 100,000 search results, so this is likely what you'll be using. Source: MDN Web Docs: Document: dragend Event
jQuery UI - dragstop: Searching for "jQuery UI Dragstop" produces only 5,000 search results at Google as of August, 2020. I can barely find any mention of it, but it is there in the Official jQuery UI Documentation: Draggable Widget.