Ticket #3919: resizable.html

File resizable.html, 1.8 KB (added by gabrielle27, 14 years ago)

demo page

Line 
1<html>
2<head>         
3       
4        <link rel="stylesheet" href="http://ui.jquery.com/applications/themes/base/ui.all.css" />                                       
5
6        <script type="text/javascript" src="http://ui.jquery.com/applications/jquery-1.3.js"></script>
7        <script type="text/javascript" src="http://ui.jquery.com/applications/ui/ui.core.js"></script> 
8        <script type="text/javascript" src="http://ui.jquery.com/applications/ui/ui.draggable.js"></script>     
9        <script type="text/javascript" src="http://ui.jquery.com/applications/ui/ui.droppable.js"></script>     
10        <script type="text/javascript" src="http://ui.jquery.com/applications/ui/ui.resizable.js"></script>     
11
12<script type="text/javascript"> 
13                $(document).ready( function() {
14
15                        $("#drop_area").droppable({
16                                accept:"div",
17                            drop: function(ev, ui) {                   
18                                        var elem = $(document.createElement("div")).css( { 
19                                                'width':'200',
20                                                'height':'200',
21                                                'background-color':'yellow'
22                                        }).append("knobs don't work").appendTo( "#drop_area" ).resizable({
23                                                knobHandles : true
24                                        });                             
25                                }
26                        });
27                        $("#drag_div").draggable({
28                                cursor : 'move',
29                                helper : 'clone'
30                        });
31            $("#knobs_work").resizable({
32                                knobHandles : true
33                        });                     
34
35                });
36                       
37
38</script>
39       
40</head>
41<body>
42        Drag the green div onto the red div.  A resizable yellow div will be created and appended to the red div.  It should have knobHandles, but it doesn't.  If you comment out line:28 of this file ( the "cursor:move" option on the green div ), then the yellow div will have knobHandles.
43        <div id="drag_div" style="background-color:green;width:200;height:200;">Drag me onto the red area below</div>                   
44
45        <div id="drop_area" style="width:100%;height:800px;background-color:red;">
46            <div id="knobs_work" style="background-color:blue;width:200;height:200;">Knobs work</div>
47        </div>
48       
49</body>
50</html>