Ticket #3163: Sortables_NestedError_r2.html

File Sortables_NestedError_r2.html, 3.4 KB (added by mlang74, 11 years ago)

Example file updated with working resize event code

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                       
63                        //sorting between nested groups does not work - http://ui.jquery.com/bugs/ticket/3163
64                        $('.contentGroup').sortable({items:'.contentArea', handle:'.moveButton', connectWith:'.contentGroup', opacity:'.5'});   
65        });
66  </script>
67        </head>
68        <body>
69                <div class="contentGroup" id="GRP_0" style="width:100%">                       
70                       
71                        <div id="CA_4" class="contentArea" style="width:99%;height:200;">
72                                <div id="CA_4_M" class="moveButton" style="width:16;"></div>
73                                <div id="GRP_4" class="contentGroup" style="left:0;top:16;width:99%;height:180">
74                                        <div id="CA_5" class="contentArea" style="width:80%;height:100;">
75                                                <div id="CA_5_M" class="moveButton" style="width:16;"></div>
76                                                <div id="CA_5_C" class="content" style="left:0;top:16;width:99%;height:80">
77                                                        Header Content Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...
78                                                </div>
79                                        </div>
80                                </div>
81                        </div> 
82                       
83                        <div id="CA_2" class="contentArea" style="width:20%;height:400;">
84                                <div id="CA_2_M" class="moveButton" style="width:16;"></div>
85                                <div id="GRP_2" class="contentGroup" style="left:0;top:16;width:99%;height:380">
86                                        <div id="CA_1" class="contentArea" style="width:98%;height:100;">
87                                                <div id="CA_1_M" class="moveButton" style="width:16;"></div>
88                                                <div id="CA_1_C" class="content" style="left:0;top:16;width:99%;height:80">
89                                    This is the side bar content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...
90                                                </div>
91                                        </div>
92                                </div>
93                        </div> 
94                       
95                        <div id="CA_3" class="contentArea" style="width:79%;height:400;">
96                                <div id="CA_3_M" class="moveButton" style="width:16;"></div>
97                                <div id="CA_3_C" class="content" style="left:0;top:16;width:99%;height:380">
98                                        This is the main body content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...
99                                </div>
100                        </div>
101                </div>
102</body>
103</html>