Ticket #3164: Sortables_NestedError_r3.html

File Sortables_NestedError_r3.html, 3.3 KB (added by mlang74, 2 years ago)

Fixed the sortable capability per issue #3163. Still not compatible with resizable.

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        border: 1px dashed #336699;
22        overflow:auto;
23        float:left;
24}
25.contentGroup{
26        position: absolute;
27        float:left;
28        margin:0px; padding:0px;
29        border: 1px solid #336699;
30        background-color: transparent;
31        overflow:visible;
32}
33.contentGroup_hover{
34        background-color: red;
35}
36.moveButton
37{
38        cursor:move;
39        background-color: #3399CC;
40        position:absolute;
41        width:16; height:16;
42        margin:0px; padding:0px;
43}
44                </style>
45  <script type="text/javascript" src="jquery-1.2.6.js"></script>
46  <script type="text/javascript" src="jquery.ui.all.js"></script>
47  <script type="text/javascript" >
48        function draggableResize(e, ui){
49                var parent = ui.element.parent().get(0);
50                ui.element.width((ui.element.width() / $(parent).width() * 100) + "%");
51               
52                var $kids = ui.element.children('.contentGroup, .content')
53                for (var k=0; k < $kids.length; k++){
54                        var $kid = $($kids[k]);
55                        $kid.width("99%");
56                        $kid.height((ui.size.height-20) + "px");
57                }
58        }
59        $(document).ready(function(){
60                //resize and sorting are not currently compatible - http://ui.jquery.com/bugs/ticket/3164
61                        $('.contentArea').resizable({resize:draggableResize});
62                        //these connected sortables work when resizing is commented out.
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:80">
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:80">
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:380">
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>