Skip to content

Commit 6cf45dd

Browse files
scottgonzalezscottgonzalez
committed
Draggable demos: Coding standards.
1 parent 98fb8c8 commit 6cf45dd

12 files changed

+219
-221
lines changed

‎demos/draggable/constrain-movement.html

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Draggable - Constrain movement</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.draggable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
1515
#draggable, #draggable2 { margin-bottom:20px; }
1616
#draggable { cursor: n-resize; }
1717
#draggable2 { cursor: e-resize; }
18-
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px;}
18+
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
1919
</style>
20-
<script type="text/javascript">
20+
<script>
2121
$(function() {
22-
$("#draggable").draggable({ axis: 'y' });
23-
$("#draggable2").draggable({ axis: 'x' });
24-
25-
$("#draggable3").draggable({ containment: '#containment-wrapper', scroll: false });
26-
$("#draggable4").draggable({ containment: '#demo-frame' });
27-
$("#draggable5").draggable({ containment: 'parent' });
22+
$( "#draggable" ).draggable({ axis: "y" });
23+
$( "#draggable2" ).draggable({ axis: "x" });
2824

25+
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
26+
$( "#draggable4" ).draggable({ containment: "#demo-frame" });
27+
$( "#draggable5" ).draggable({ containment: "parent" });
2928
});
3029
</script>
3130
</head>
3231
<body>
32+
3333
<div class="demo">
3434

3535
<h3 class="docs">Constrain movement along an axis:</h3>
@@ -59,12 +59,11 @@ <h3 class="docs">Or to within another DOM element:</h3>
5959

6060
</div><!-- End demo -->
6161

62-
<div class="demo-description">
6362

64-
<p>
65-
Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'
66-
</p>
6763

64+
<div class="demo-description">
65+
<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
6866
</div><!-- End demo-description -->
67+
6968
</body>
7069
</html>

‎demos/draggable/cursor-style.html

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Draggable - Cursor style</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.draggable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
1515
</style>
16-
<script type="text/javascript">
16+
<script>
1717
$(function() {
18-
$("#draggable").draggable({ cursorAt: { cursor: 'move', top: 56, left: 56 } });
19-
$("#draggable2").draggable({ cursorAt: { cursor: 'crosshair', top: -5, left: -5 } });
20-
$("#draggable3").draggable({ cursorAt: { bottom: 0 } });
18+
$( "#draggable" ).draggable({ cursorAt: { cursor: "move", top: 56, left: 56 } });
19+
$( "#draggable2" ).draggable({ cursorAt: { cursor: "crosshair", top: -5, left: -5 } });
20+
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
2121
});
2222
</script>
2323
</head>
2424
<body>
25+
2526
<div class="demo">
2627

2728
<div id="draggable" class="ui-widget-content">
@@ -38,12 +39,11 @@
3839

3940
</div><!-- End demo -->
4041

41-
<div class="demo-description">
4242

43-
<p>
44-
Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.
45-
</p>
4643

44+
<div class="demo-description">
45+
<p>Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.</p>
4746
</div><!-- End demo-description -->
47+
4848
</body>
4949
</html>

‎demos/draggable/default.html

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Draggable - Default functionality</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.draggable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#draggable { width: 150px; height: 150px; padding: 0.5em; }
1515
</style>
16-
<script type="text/javascript">
16+
<script>
1717
$(function() {
18-
$("#draggable").draggable();
18+
$( "#draggable" ).draggable();
1919
});
2020
</script>
2121
</head>
@@ -29,12 +29,10 @@
2929

3030
</div><!-- End demo -->
3131

32-
<div class="demo-description">
3332

34-
<p>
35-
Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
36-
</p>
3733

34+
<div class="demo-description">
35+
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
3836
</div><!-- End demo-description -->
3937

4038
</body>

‎demos/draggable/delay-start.html

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Draggable - Delay start</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.draggable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
1515
</style>
16-
<script type="text/javascript">
16+
<script>
1717
$(function() {
18-
$("#draggable").draggable({ distance: 20 });
19-
$("#draggable2").draggable({ delay: 1000 });
20-
$(".ui-draggable").disableSelection();
18+
$( "#draggable" ).draggable({ distance: 20 });
19+
$( "#draggable2" ).draggable({ delay: 1000 });
20+
$( ".ui-draggable" ).disableSelection();
2121
});
2222
</script>
2323
</head>
2424
<body>
25+
2526
<div class="demo">
2627

2728
<div id="draggable" class="ui-widget-content">
@@ -34,12 +35,11 @@
3435

3536
</div><!-- End demo -->
3637

37-
<div class="demo-description">
3838

39-
<p>
40-
Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option.
41-
</p>
4239

40+
<div class="demo-description">
41+
<p>Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. </p>
4342
</div><!-- End demo-description -->
43+
4444
</body>
4545
</html>

‎demos/draggable/events.html

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,53 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Draggable - Events</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
14-
#draggable { width: 16em; padding: 0 1em; }
15-
#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
16-
#draggable ul li span.ui-icon { float: left; }
17-
#draggable ul li span.count { font-weight: bold; }
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.draggable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
14+
#draggable { width: 16em; padding: 0 1em; }
15+
#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
16+
#draggable ul li span.ui-icon { float: left; }
17+
#draggable ul li span.count { font-weight: bold; }
1818
</style>
19-
<script type="text/javascript">
20-
$(function() {
21-
var $start_counter = $('#event-start'), $drag_counter = $('#event-drag'), $stop_counter = $('#event-stop');
22-
var counts = [0,0,0];
19+
<script>
20+
$(function() {
21+
var $start_counter = $( "#event-start" ),
22+
$drag_counter = $( "#event-drag" ),
23+
$stop_counter = $( "#event-stop" ),
24+
counts = [ 0, 0, 0 ];
2325

24-
$("#draggable").draggable({
25-
start: function() {
26-
counts[0]++;
27-
updateCounterStatus($start_counter,counts[0]);
28-
},
29-
drag: function() {
30-
counts[1]++;
31-
updateCounterStatus($drag_counter,counts[1]);
32-
},
33-
stop: function() {
34-
counts[2]++;
35-
updateCounterStatus($stop_counter,counts[2]);
36-
}
37-
});
26+
$( "#draggable" ).draggable({
27+
start: function() {
28+
counts[ 0 ]++;
29+
updateCounterStatus( $start_counter, counts[ 0 ] );
30+
},
31+
drag: function() {
32+
counts[ 1 ]++;
33+
updateCounterStatus( $drag_counter, counts[ 1 ] );
34+
},
35+
stop: function() {
36+
counts[ 2 ]++;
37+
updateCounterStatus( $stop_counter, counts[ 2 ] );
38+
}
3839
});
3940

40-
function updateCounterStatus($event_counter,new_count) {
41+
function updateCounterStatus( $event_counter, new_count ) {
4142
// first update the status visually...
42-
if (!$event_counter.hasClass('ui-state-hover')) {
43-
$event_counter.addClass('ui-state-hover')
44-
.siblings().removeClass('ui-state-hover');
43+
if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
44+
$event_counter.addClass( "ui-state-hover" )
45+
.siblings().removeClass( "ui-state-hover" );
4546
}
4647
// ...then update the numbers
47-
$('span.count',$event_counter).text(new_count);
48+
$( "span.count", $event_counter ).text( new_count );
4849
}
50+
});
4951
</script>
5052
</head>
5153
<body>
@@ -65,12 +67,10 @@
6567

6668
</div><!-- End demo -->
6769

68-
<div class="demo-description">
6970

70-
<p>
71-
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.
72-
</p>
7371

72+
<div class="demo-description">
73+
<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>
7474
</div><!-- End demo-description -->
7575

7676
</body>

‎demos/draggable/handle.html

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Draggable - Handles</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.draggable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
1515
#draggable p { cursor: move; }
1616
</style>
17-
<script type="text/javascript">
17+
<script>
1818
$(function() {
19-
$("#draggable").draggable({ handle: 'p' });
20-
$("#draggable2").draggable({ cancel: "p.ui-widget-header" });
21-
$("div, p").disableSelection();
19+
$( "#draggable" ).draggable({ handle: "p" });
20+
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
21+
$( "div, p" ).disableSelection();
2222
});
2323
</script>
2424
</head>
2525
<body>
26+
2627
<div class="demo">
2728

2829
<div id="draggable" class="ui-widget-content">
@@ -38,11 +39,12 @@
3839

3940
</div><!-- End demo -->
4041

41-
<div class="demo-description">
4242

43+
44+
<div class="demo-description">
4345
<p>Allow dragging only when the cursor is over a specific part of the draggable. Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
4446
<p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p>
45-
4647
</div><!-- End demo-description -->
48+
4749
</body>
4850
</html>

0 commit comments

Comments
 (0)