1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
---|
2 | <html lang="en"> |
---|
3 | <head> |
---|
4 | <title>sortable test</title> |
---|
5 | <script type="text/javascript" src="jquery.ui-1.5.3/jquery-1.2.6.js"></script> |
---|
6 | <!--<script type="text/javascript" src="../PlanningTool/jquery-1.3.min.js"></script>--> |
---|
7 | <!--<script type="text/javascript" src="jquery.ui-1.5.3/ui/ui.core.js"></script>--> |
---|
8 | <!--<script type="text/javascript" src="jquery.ui-1.5.3/ui/ui.sortable.js"></script>--> |
---|
9 | <script type="text/javascript" src="../PlanningTool/jquery.ui-1.6rc4/ui/ui.core.js"></script> |
---|
10 | <script type="text/javascript" src="../PlanningTool/jquery.ui-1.6rc4/ui/ui.sortable.js"></script> |
---|
11 | |
---|
12 | <script> |
---|
13 | $(document).ready(function() { |
---|
14 | $('#l1,#l2').sortable({ |
---|
15 | connectWith:['#l1,#l2'], |
---|
16 | update:function(e,ui) {alert('update!');}, |
---|
17 | receive:function(e,ui) {alert('receive!');}, |
---|
18 | remove:function(e,ui) {alert('remove!');}, |
---|
19 | }); |
---|
20 | }); |
---|
21 | </script> |
---|
22 | <style> |
---|
23 | li { |
---|
24 | background-color:yellow; |
---|
25 | } |
---|
26 | ul { |
---|
27 | padding:10px; |
---|
28 | background-color:grey; |
---|
29 | } |
---|
30 | </style> |
---|
31 | </head> |
---|
32 | <body> |
---|
33 | <ul id='l1'> |
---|
34 | <li>Aap</li> |
---|
35 | <li>Noot</li> |
---|
36 | <li>Mies</li> |
---|
37 | </ul> |
---|
38 | <ul id='l2'> |
---|
39 | <li>Aap</li> |
---|
40 | <li>Noot</li> |
---|
41 | <li>Mies</li> |
---|
42 | </ul> |
---|
43 | </body> |
---|
44 | </html> |
---|