jQuery UI Draggable - Events
#draggable { width: 16em; padding: 0 1em; }
#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
#draggable ul li span.ui-icon { float: left; }
#draggable ul li span.count { font-weight: bold; }
$(function() {
var $start_counter = $('#event-start'), $drag_counter = $('#event-drag'), $stop_counter = $('#event-stop');
var counts = [0,0,0];
$("#draggable").draggable({
start: function() {
counts[0]++;
updateCounterStatus($start_counter,counts[0]);
},
drag: function() {
counts[1]++;
updateCounterStatus($drag_counter,counts[1]);
},
stop: function() {
counts[2]++;
updateCounterStatus($stop_counter,counts[2]);
}
});
});
function updateCounterStatus($event_counter,new_count) {
// first update the status visually...
if (!$event_counter.hasClass('ui-state-hover')) {
$event_counter.addClass('ui-state-hover')
.siblings().removeClass('ui-state-hover');
}
// ...then update the numbers
$('span.count',$event_counter).text(new_count);
}
Drag me to trigger the chain of events.
"start" invoked 0x
"drag" invoked 0x
"stop" invoked 0x
Layer functionality onto the draggable using the start, drag, and stop events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.