Ticket #3164: Sortables_NestedError_r4.html

File Sortables_NestedError_r4.html, 3.8 KB (added by mlang74, 2 years ago)

Workaround solution

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        overflow:auto;
23}
24.contentGroup{
25        position: absolute;
26        float:left;
27        margin:0px; padding:0px;
28        border: 1px solid #336699;
29        background-color: transparent;
30        overflow:visible;
31}
32.contentGroup_hover{
33        background-color: red;
34}
35.moveButton
36{
37        cursor:move;
38        background-color: #3399CC;
39        position:absolute;
40        width:16; height:16;
41        margin:0px; padding:0px;
42}
43                </style>
44  <script type="text/javascript" src="jquery-1.2.6.js"></script>
45  <script type="text/javascript" src="jquery.ui.all.js"></script>
46  <script type="text/javascript" >
47        function draggableResize(e, ui){
48                var parent = ui.element.parent().get(0);
49                ui.element.css("width", (ui.element.width() / $(parent).width() * 100) + "%");
50               
51                ui.element.children('.contentGroup,.content').each(function(){
52                        $(this).width("99%");
53                        $(this).height(ui.size.height-25);
54                });
55        }
56        function sortComplete(e, ui){
57                //this is part of a fix required for jQuery UI 1.5.2 - see below
58                $('.contentArea').resizable({ autoHide: true, resize:draggableResize});
59        }
60        $(document).ready(function(){
61                //resize and sorting are not compatible
62                        $('.contentArea').resizable({ autoHide: true, resize:draggableResize});
63                        $('.contentGroup').sortable({items:'.contentArea', handle:'.moveButton', connectWith:['.contentGroup'], opacity:'.5', stop:sortComplete});
64                       
65                        //the following handlers are required because resizable elements cannot be part of a sortable group. (jQuery UI 1.5.2)
66                        //      resizing works without this, but the sortables do not work when contained elements are resizable
67                        $('.moveButton').bind("mouseenter", function(e){
68                                $('.contentArea').resizable("destroy");
69                        });
70                        $('.moveButton').bind("mouseout", function(e){
71                                $('.contentArea').resizable({ autoHide: true, resize:draggableResize});
72                        });
73        });
74  </script>
75        </head>
76        <body>
77                <div class="contentGroup" id="GRP_0" style="width:100%">                       
78                       
79                        <div id="CA_4" class="contentArea" style="width:99%;height:200;">
80                                <div id="CA_4_M" class="moveButton" style="width:16;"></div>
81                                <div id="GRP_4" class="contentGroup" style="left:0;top:16;width:99%;height:180">
82                                        <div id="CA_5" class="contentArea" style="width:80%;height:100;">
83                                                <div id="CA_5_M" class="moveButton" style="width:16;"></div>
84                                                <div id="CA_5_C" class="content" style="left:0;top:16;width:99%;height:80">
85                                                        Header Content Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...
86                                                </div>
87                                        </div>
88                                </div>
89                        </div>
90                       
91                        <div id="CA_2" class="contentArea" style="width:20%;height:400;">
92                                <div id="CA_2_M" class="moveButton" style="width:16;"></div>
93                                <div id="GRP_2" class="contentGroup" style="left:0;top:16;width:99%;height:380">
94                                        <div id="CA_1" class="contentArea" style="width:98%;height:100;">
95                                                <div id="CA_1_M" class="moveButton" style="width:16;"></div>
96                                                <div id="CA_1_C" class="content" style="left:0;top:16;width:99%;height:80">
97                                    This is the side bar content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...
98                                                </div>
99                                        </div>
100                                </div>
101                        </div>
102                       
103                        <div id="CA_3" class="contentArea" style="width:79%;height:400;">
104                                <div id="CA_3_M" class="moveButton" style="width:16;"></div>
105                                <div id="CA_3_C" class="content" style="left:0;top:16;width:99%;height:380">
106                                        This is the main body content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...
107                                </div>
108                        </div>
109                </div>
110</body>
111</html>