1 files changed, 74 insertions, 0 deletions
diff --git a/static/development-bundle/demos/draggable/events.html b/static/development-bundle/demos/draggable/events.html
new file mode 100644
index 0000000..ca13a9f
--- /dev/null
+++ b/static/development-bundle/demos/draggable/events.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+        <title>jQuery UI Draggable - Events</title>
+        <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+        <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+        <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; } * html #draggable ul li { height: 1%; }
+                #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>
+Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events.  Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.
+</p>
+</div><!-- End demo-description -->
+</body>
+</html>

diff --git a/static/development-bundle/demos/draggable/events.html b/static/development-bundle/demos/draggable/events.html new file mode 100644 index 0000000..ca13a9f --- /dev/null +++ b/static/development-bundle/demos/draggable/events.html
@@ -0,0 +1,74 @@
	1	<!doctype html>
	2	<html lang="en">
	3	<head>
	4	<title>jQuery UI Draggable - Events</title>
	5	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
	6	<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
	7	<script type="text/javascript" src="../../ui/ui.core.js"></script>
	8	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
	9	<link type="text/css" href="../demos.css" rel="stylesheet" />
	10	<style type="text/css">
	11	#draggable { width: 16em; padding: 0 1em; }
	12	#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
	13	#draggable ul li span.ui-icon { float: left; }
	14	#draggable ul li span.count { font-weight: bold; }
	15	</style>
	16	<script type="text/javascript">
	17	$(function() {
	18	var $start_counter = $('#event-start'), $drag_counter = $('#event-drag'), $stop_counter = $('#event-stop');
	19	var counts = [0,0,0];
	20
	21	$("#draggable").draggable({
	22	start: function() {
	23	counts[0]++;
	24	updateCounterStatus($start_counter,counts[0]);
	25	},
	26	drag: function() {
	27	counts[1]++;
	28	updateCounterStatus($drag_counter,counts[1]);
	29	},
	30	stop: function() {
	31	counts[2]++;
	32	updateCounterStatus($stop_counter,counts[2]);
	33	}
	34	});
	35	});
	36
	37	function updateCounterStatus($event_counter,new_count) {
	38	// first update the status visually...
	39	if (!$event_counter.hasClass('ui-state-hover')) {
	40	$event_counter.addClass('ui-state-hover')
	41	.siblings().removeClass('ui-state-hover');
	42	}
	43	// ...then update the numbers
	44	$('span.count',$event_counter).text(new_count);
	45	}
	46	</script>
	47	</head>
	48	<body>
	49
	50	<div class="demo">
	51
	52	<div id="draggable" class="ui-widget ui-widget-content">
	53
	54	<p>Drag me to trigger the chain of events.</p>
	55
	56	<ul class="ui-helper-reset">
	57	<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>
	58	<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>
	59	<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>
	60	</ul>
	61	</div>
	62
	63	</div><!-- End demo -->
	64
	65	<div class="demo-description">
	66
	67	<p>
	68	Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.
	69	</p>
	70
	71	</div><!-- End demo-description -->
	72
	73	</body>
	74	</html>