diff options
Diffstat (limited to 'static/development-bundle/demos/sortable/placeholder.html')
-rw-r--r-- | static/development-bundle/demos/sortable/placeholder.html | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/static/development-bundle/demos/sortable/placeholder.html b/static/development-bundle/demos/sortable/placeholder.html new file mode 100644 index 0000000..565eb0b --- /dev/null +++ b/static/development-bundle/demos/sortable/placeholder.html | |||
@@ -0,0 +1,53 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Sortable - Drop placeholder</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.sortable.js"></script> | ||
9 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } | ||
12 | #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } | ||
13 | html>body #sortable li { height: 1.5em; line-height: 1.2em; } | ||
14 | .ui-state-highlight { height: 1.5em; line-height: 1.2em; } | ||
15 | </style> | ||
16 | <script type="text/javascript"> | ||
17 | $(function() { | ||
18 | $("#sortable").sortable({ | ||
19 | placeholder: 'ui-state-highlight' | ||
20 | }); | ||
21 | $("#sortable").disableSelection(); | ||
22 | }); | ||
23 | </script> | ||
24 | </head> | ||
25 | <body> | ||
26 | <div class="demo"> | ||
27 | |||
28 | <ul id="sortable"> | ||
29 | <li class="ui-state-default">Item 1</li> | ||
30 | <li class="ui-state-default">Item 2</li> | ||
31 | <li class="ui-state-default">Item 3</li> | ||
32 | <li class="ui-state-default">Item 4</li> | ||
33 | <li class="ui-state-default">Item 5</li> | ||
34 | <li class="ui-state-default">Item 6</li> | ||
35 | <li class="ui-state-default">Item 7</li> | ||
36 | </ul> | ||
37 | |||
38 | </div><!-- End demo --> | ||
39 | |||
40 | <div class="demo-description"> | ||
41 | |||
42 | <p> | ||
43 | When dragging a sortable item to a new location, other items will make room | ||
44 | for the that item by shifting to allow white space between them. Pass a | ||
45 | class into the <code>placeholder</code> option to style that space to | ||
46 | be visible. Use the boolean <code>forcePlaceholderSize</code> option | ||
47 | to set dimensions on the placeholder. | ||
48 | </p> | ||
49 | |||
50 | </div><!-- End demo-description --> | ||
51 | |||
52 | </body> | ||
53 | </html> | ||