OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html lang="en"> | |
3 <head> | |
4 <meta charset="UTF-8" /> | |
5 <title>jQuery UI Droppable - Default Demo</title> | |
6 <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.10.custom.css" re
l="stylesheet" /> | |
7 <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> | |
8 <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></scr
ipt> | |
9 <style type="text/css"> | |
10 #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin:
10px 10px 10px 0; } | |
11 #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin:
10px; } | |
12 </style> | |
13 <script type="text/javascript"> | |
14 $(function() { | |
15 $("#draggable").draggable(); | |
16 $("#droppable").droppable({ | |
17 drop: function(event, ui) { | |
18 $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); | |
19 } | |
20 }); | |
21 | |
22 var report_event = function(report_text) { | |
23 var reportElement = $("#drop_reports"); | |
24 var origText = reportElement.text(); | |
25 reportElement.text(origText + " " + report_text); | |
26 } | |
27 | |
28 $('body').mousedown(function() { | |
29 report_event('down'); | |
30 }); | |
31 | |
32 $('body').mousemove(function() { | |
33 report_event('move'); | |
34 }); | |
35 | |
36 $('body').mouseup(function() { | |
37 report_event('up'); | |
38 }); | |
39 }); | |
40 </script> | |
41 </head> | |
42 <body> | |
43 <div class="demo"> | |
44 | |
45 <div id="draggable" class="ui-widget-content"> | |
46 <p>Drag me to my target</p> | |
47 </div> | |
48 | |
49 <div id="droppable" class="ui-widget-header"> | |
50 <p>Drop here</p> | |
51 </div> | |
52 | |
53 <div class="test-data"> | |
54 <p id="drop_reports">start</p> | |
55 </div> | |
56 | |
57 </div><!-- End demo --> | |
58 | |
59 <div class="demo-description"> | |
60 | |
61 <p>Taken from the JQuery demo.</p> | |
62 | |
63 </div><!-- End demo-description --> | |
64 </body> | |
65 </html> | |
OLD | NEW |