Ticket #3163: Sortables_NestedError.html

File Sortables_NestedError.html, 3.3 KB (added by mlang74, 11 years ago)

Demonstrates that nested sortables are not working

Line 
1<html>
2        <head>
3                <style>
4body{
5    background-color:#EEEEEE;
6    margin:0px; padding:0px;
7}
8div{
9    margin:0px; padding:0px;
10}
11.contentArea {
12        position: relative;
13        float:left;
14        margin:0px; padding:0px;
15        border: 1px dashed #336699;
16        background-color: #99CCFF;
17        overflow:visible;
18}
19.content {
20        position:absolute;
21        float:left;
22}
23.contentGroup{
24        position: absolute;
25        float:left;
26        margin:0px; padding:0px;
27        border: 1px solid #336699;
28        background-color: transparent;
29        overflow:visible;
30}
31.contentGroup_hover{
32        background-color: red;
33}
34.moveButton
35{
36        cursor:move;
37        background-color: #3399CC;
38        position:absolute;
39        width:16; height:16;
40        margin:0px; padding:0px;
41}
42                </style>
43  <script type="text/javascript" src="jquery-1.2.6.js"></script>
44  <script type="text/javascript" src="jquery.ui.all.js"></script>
45  <script type="text/javascript" >
46        function draggableResize(e, ui){
47                var parent = ui.element.parent().get(0);
48                ui.element.css("width", (ui.element.width() / $(parent).width() * 100) + "%");
49               
50                ui.element.children('.contentGroup', '.content').each(function(){
51                        $(this).css("width", "99%");
52                        $(this).css("height", (ui.size.height-20) + "px");
53                });
54        }
55        function draggableResizeComplete(e, ui){
56                //TODO:
57        }
58        $(document).ready(function(){
59                //resize and sorting are not currently compatible
60                        //$('.contentArea').resizable({resize:draggableResize, stop:draggableResizeComplete});
61                       
62                        //sorting between groups does not work when they are nested
63                        $('.contentGroup').sortable({items:'.contentArea', handle:'.moveButton', connectWith:'.contentGroup', opacity:'.5'});   
64        });
65  </script>
66        </head>
67        <body>
68                <div class="contentGroup" id="GRP_0" style="width:100%">                       
69                       
70                        <div id="CA_4" class="contentArea" style="width:99%;height:200;">
71                                <div id="CA_4_M" class="moveButton" style="width:16;"></div>
72                                <div id="GRP_4" class="contentGroup" style="left:0;top:16;width:99%;height:180">
73                                        <div id="CA_5" class="contentArea" style="width:80%;height:100;">
74                                                <div id="CA_5_M" class="moveButton" style="width:16;"></div>
75                                                <div id="CA_5_C" class="content" style="left:0;top:16;width:99%;height:184">
76                                                        Header Content Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...
77                                                </div>
78                                        </div>
79                                </div>
80                        </div> 
81                       
82                        <div id="CA_2" class="contentArea" style="width:20%;height:400;">
83                                <div id="CA_2_M" class="moveButton" style="width:16;"></div>
84                                <div id="GRP_2" class="contentGroup" style="left:0;top:16;width:99%;height:380">
85                                        <div id="CA_1" class="contentArea" style="width:98%;height:100;">
86                                                <div id="CA_1_M" class="moveButton" style="width:16;"></div>
87                                                <div id="CA_1_C" class="content" style="left:0;top:16;width:99%;height:84">
88                                    This is the side bar content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...
89                                                </div>
90                                        </div>
91                                </div>
92                        </div> 
93                       
94                        <div id="CA_3" class="contentArea" style="width:79%;height:400;">
95                                <div id="CA_3_M" class="moveButton" style="width:16;"></div>
96                                <div id="CA_3_C" class="content" style="left:0;top:16;width:99%;height:384">
97                                        This is the main body content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...
98                                </div>
99                        </div>
100                </div>
101</body>
102</html>