Ticket #4926: example.htm

File example.htm, 1.4 KB (added by martyf, 13 years ago)

Demonstration of problem

Line 
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<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>Untitled Document</title>
6<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
7<script src="js/ui.core.js" type="text/javascript"></script>
8<script src="js/ui.draggable.js" type="text/javascript"></script>
9<script src="js/ui.sortable.js" type="text/javascript"></script>
10</head>
11<body>
12<style type="text/css">
13
14        ul {
15                position:relative;
16        }
17       
18        ul, li {
19                margin:0;
20                padding:0;
21                list-style:none;
22        }
23       
24        li {
25                width:200px;
26                margin:1px;
27                padding:5px;
28                border:solid 1px #AAA;
29                background-color:#EEE;
30               
31                position:relative;
32        }
33       
34        ul li ul {
35                position:absolute;
36                top:-1px;
37                left:212px;
38                padding-left:1px;
39        }
40       
41        .ph {
42                background-color:#CCC;
43        }
44       
45</style>
46<script type="text/javascript">
47        $(function() {
48                               
49                $(".sortable").sortable({
50                        forcePlaceholderSize: true,
51                        placeholder: 'ph',
52                        opacity: 0.8,
53                        items: 'li.menu-item'
54                });
55                $(".sortable").disableSelection();
56
57        });
58        </script>
59<ul class="sortable">
60  <li class="menu-item"> Parent 1 </li>
61  <li class="menu-item"> Parent 2
62    <ul>
63      <li class="menu-item"> Sub </li>
64      <li class="menu-item"> Sub 2 </li>
65    </ul>
66  </li>
67</ul>
68</body>
69</html>