1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
---|
2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
---|
3 | <head> |
---|
4 | <title></title> |
---|
5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
---|
6 | |
---|
7 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script> |
---|
8 | <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js"></script> |
---|
9 | <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.sortable.js"></script> |
---|
10 | <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.draggable.js"></script> |
---|
11 | <style type="text/css"> |
---|
12 | #sortable, #draggables { border:1px solid black; } |
---|
13 | </style> |
---|
14 | |
---|
15 | <script type="text/javascript"> |
---|
16 | |
---|
17 | jQuery(function ($) { |
---|
18 | |
---|
19 | $("#sortable").sortable({ |
---|
20 | receive: function(event, ui) |
---|
21 | { |
---|
22 | $("#out-1").text( |
---|
23 | "#" + $(ui.sender).attr("id") |
---|
24 | ); |
---|
25 | $("#out-2").text( |
---|
26 | "#" + $(ui.item).attr("id") |
---|
27 | ); |
---|
28 | $("*").css("background-color", "inherit"); // reset before setting again |
---|
29 | $(ui.item).css("background-color", "pink"); |
---|
30 | return true; |
---|
31 | } |
---|
32 | }); |
---|
33 | |
---|
34 | $("#draggables div").draggable({ |
---|
35 | helper: "clone", |
---|
36 | connectToSortable: "#sortable" |
---|
37 | }); |
---|
38 | |
---|
39 | }); |
---|
40 | |
---|
41 | </script> |
---|
42 | </head> |
---|
43 | |
---|
44 | <body> |
---|
45 | #draggables |
---|
46 | <div id="draggables"> |
---|
47 | <div id="draggable_item_1">draggable item 1</div> |
---|
48 | <div id="draggable_item_2">draggable item 2</div> |
---|
49 | </div> |
---|
50 | |
---|
51 | <br /> |
---|
52 | <br /> |
---|
53 | #sortable |
---|
54 | <div id="sortable"> |
---|
55 | <div>sortable item 1</div> |
---|
56 | <div>sortable item 2</div> |
---|
57 | </div> |
---|
58 | |
---|
59 | <br /> |
---|
60 | <br /> |
---|
61 | receive: ui.sender = <span id="out-1"> </span><br /> |
---|
62 | receive: ui.item = <span id="out-2"> </span> |
---|
63 | |
---|
64 | |
---|
65 | </body> |
---|
66 | </html> |
---|