Skip to content

Commit a1fc59c

Browse files
scottgonzalezscottgonzalez
committed
Droppable demos: Coding standards.
1 parent 6cf45dd commit a1fc59c

File tree

8 files changed

+330
-294
lines changed

8 files changed

+330
-294
lines changed

‎demos/droppable/accepted-elements.html

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,39 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<title>jQuery UI Droppable - Accept Demo</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-
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
13-
<link type="text/css" href="../demos.css" rel="stylesheet" />
14-
<style type="text/css">
4+
<meta charset="utf-8">
5+
<title>jQuery UI Droppable - Accept</title>
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+
<script src="../../ui/jquery.ui.droppable.js"></script>
13+
<link rel="stylesheet" href="../demos.css">
14+
<style>
1515
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
1616
#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
1717
</style>
18-
<script type="text/javascript">
18+
<script>
1919
$(function() {
20-
21-
$("#draggable, #draggable-nonvalid").draggable();
22-
23-
$("#droppable").droppable({
24-
accept: '#draggable',
25-
activeClass: 'ui-state-hover',
26-
hoverClass: 'ui-state-active',
27-
drop: function(event, ui) {
28-
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
20+
$( "#draggable, #draggable-nonvalid" ).draggable();
21+
$( "#droppable" ).droppable({
22+
accept: "#draggable",
23+
activeClass: "ui-state-hover",
24+
hoverClass: "ui-state-active",
25+
drop: function( event, ui ) {
26+
$( this )
27+
.addClass( "ui-state-highlight" )
28+
.find( "p" )
29+
.html( "Dropped!" );
2930
}
3031
});
31-
3232
});
3333
</script>
3434
</head>
3535
<body>
36+
3637
<div class="demo">
3738

3839
<div id="draggable-nonvalid" class="ui-widget-content">
@@ -49,10 +50,11 @@
4950

5051
</div><!-- End demo -->
5152

52-
<div class="demo-description">
5353

54-
<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
5554

55+
<div class="demo-description">
56+
<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
5657
</div><!-- End demo-description -->
58+
5759
</body>
5860
</html>

‎demos/droppable/default.html

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,36 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<title>jQuery UI Droppable - Default Demo</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-
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
13-
<link type="text/css" href="../demos.css" rel="stylesheet" />
14-
<style type="text/css">
4+
<meta charset="utf-8">
5+
<title>jQuery UI Droppable - Default functionality</title>
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+
<script src="../../ui/jquery.ui.droppable.js"></script>
13+
<link rel="stylesheet" href="../demos.css">
14+
<style>
1515
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
1616
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
1717
</style>
18-
<script type="text/javascript">
18+
<script>
1919
$(function() {
20-
$("#draggable").draggable();
21-
$("#droppable").droppable({
22-
drop: function(event, ui) {
23-
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
20+
$( "#draggable" ).draggable();
21+
$( "#droppable" ).droppable({
22+
drop: function( event, ui ) {
23+
$( this )
24+
.addClass( "ui-state-highlight" )
25+
.find( "p" )
26+
.html( "Dropped!" );
2427
}
2528
});
26-
2729
});
2830
</script>
2931
</head>
3032
<body>
33+
3134
<div class="demo">
3235

3336
<div id="draggable" class="ui-widget-content">
@@ -40,10 +43,11 @@
4043

4144
</div><!-- End demo -->
4245

43-
<div class="demo-description">
4446

45-
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
4647

48+
<div class="demo-description">
49+
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
4750
</div><!-- End demo-description -->
51+
4852
</body>
4953
</html>

‎demos/droppable/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Droppable Demos</title>
6-
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
<link rel="stylesheet" href="../demos.css">
77
</head>
88
<body>
99

0 commit comments

Comments
 (0)