2009-01-08 16:39:03 +00:00
<!doctype html>
< html lang = "en" >
< head >
2009-01-15 21:57:33 +00:00
< title > jQuery UI Draggable - Events< / title >
2009-01-08 16:39:03 +00:00
< link type = "text/css" href = "../../themes/base/ui.all.css" rel = "stylesheet" / >
2009-01-14 23:26:15 +00:00
< script type = "text/javascript" src = "../../jquery-1.3.js" > < / script >
2009-01-08 16:39:03 +00:00
< script type = "text/javascript" src = "../../ui/ui.core.js" > < / script >
< script type = "text/javascript" src = "../../ui/ui.draggable.js" > < / script >
< link type = "text/css" href = "../demos.css" rel = "stylesheet" / >
< style type = "text/css" >
#draggable { width: 16em; padding: 0 1em; }
#draggable ul li { margin: 1em 0; padding: 0.5em 0; }
#draggable ul li span.ui-icon { float: left; }
#draggable ul li span.count { font-weight: bold; }
< / style >
< script type = "text/javascript" >
$(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);
}
< / script >
< / head >
< body >
< div class = "demo" >
< div id = "draggable" class = "ui-widget ui-widget-content" >
< p > Drag me to trigger the chain of events.< / p >
< ul class = "ui-helper-reset" >
< li id = "event-start" class = "ui-state-default ui-corner-all" > < span class = "ui-icon ui-icon-play" > < / span > "start" invoked < span class = "count" > 0< / span > x< / li >
< li id = "event-drag" class = "ui-state-default ui-corner-all" > < span class = "ui-icon ui-icon-arrow-4" > < / span > "drag" invoked < span class = "count" > 0< / span > x< / li >
< li id = "event-stop" class = "ui-state-default ui-corner-all" > < span class = "ui-icon ui-icon-stop" > < / span > "stop" invoked < span class = "count" > 0< / span > x< / li >
< / ul >
< / div >
< / div > <!-- End demo -->
< div class = "demo-description" >
< p >
2009-01-15 21:57:33 +00:00
Layer functionality onto the draggable using the < strong > start< / strong > , < strong > drag< / strong > , and < strong > stop< / strong > events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.
2009-01-08 16:39:03 +00:00
< / p >
< / div > <!-- End demo - description -->
< / body >
< / html >
