1 | <html> |
---|
2 | <head> |
---|
3 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
---|
4 | <title>Test case</title> |
---|
5 | <style type="text/css"> |
---|
6 | #list { background-color: #EEE; width: 300px; padding: 10px; } |
---|
7 | #list div { border: solid 1px #000; background-color: #FFF; } |
---|
8 | </style> |
---|
9 | <script type="text/javascript" src="jquery-1.4.2.min.js"></script> |
---|
10 | <script type="text/javascript" src="jquery-ui-1.8.1.custom.min.js"></script> |
---|
11 | <script type="text/javascript"> |
---|
12 | $(document).ready(function() { $("#list").sortable({axis: 'y', containment: 'parent'}); }); |
---|
13 | </script> |
---|
14 | </head> |
---|
15 | <body> |
---|
16 | <div id="list"> |
---|
17 | <div>Element 1</div> |
---|
18 | <div>Element 2</div> |
---|
19 | <div>Element 3</div> |
---|
20 | <div>Element 4</div> |
---|
21 | <div>Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long textVery long text</div> |
---|
22 | <div>Element 5</div> |
---|
23 | </div> |
---|
24 | </body> |
---|
25 | </html> |
---|