|
1 | 1 | <!DOCTYPE html>
|
2 | 2 | <html lang="en">
|
3 | 3 | <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> |
15 | 15 | #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
16 | 16 | #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
17 | 17 | </style>
|
18 |
| - <script type="text/javascript"> |
| 18 | + <script> |
19 | 19 | $(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!" ); |
29 | 30 | }
|
30 | 31 | });
|
31 |
| - |
32 | 32 | });
|
33 | 33 | </script>
|
34 | 34 | </head>
|
35 | 35 | <body>
|
| 36 | + |
36 | 37 | <div class="demo">
|
37 | 38 |
|
38 | 39 | <div id="draggable-nonvalid" class="ui-widget-content">
|
|
49 | 50 |
|
50 | 51 | </div><!-- End demo -->
|
51 | 52 |
|
52 |
| -<div class="demo-description"> |
53 | 53 |
|
54 |
| -<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p> |
55 | 54 |
|
| 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> |
56 | 57 | </div><!-- End demo-description -->
|
| 58 | + |
57 | 59 | </body>
|
58 | 60 | </html>
|
0 commit comments