Bug Tracker

Ticket #2887: writeln.html

File writeln.html, 2.5 KB (added by michelled, 12 years ago)
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3        <head>
4                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5       
6        <style type="text/css">
7            div { border: 1px solid }
8            #outer-container {background-color: #FFFF99; height: 600px}
9            .item {background-color: #99FFFF; width: 50%}
10        </style>
11 
12        <script type="text/javascript" src="../../../../fluid-components/js/jquery/jquery-1.2.6.js"></script>
13        <script type="text/javascript" src="../../../../fluid-components/js/jquery/ui.core.js"></script>
14        <script type="text/javascript" src="../../../../fluid-components/js/jquery/ui.draggable.js"></script>
15        <script type="text/javascript" src="../../../../fluid-components/js/jquery/ui.droppable.js"></script>
16                <title>Writeln Example</title>
17        </head>
18        <body>
19          <h1> Writeln Test </h1>
20      <p>
21          This is an example of doing a 'document.writeln' while moving.  This example uses jQuery drag and drop and does not use the Fluid Reorderer.
22      </p>
23          <div id="outer-container">
24            <h1>Container</h1>
25            This is the container. It is a droppable.
26        <div id="item1" class="item">
27            <h1> Item 1</h1>
28            <p>This is a draggable containing a script that does a 'document.writeln'.</p>
29            <script type="text/javascript">
30                document.writeln("This will break drag and drop");
31            </script> 
32        </div>
33        <div id="item2" class="item">
34            <h1>Item 2</h1>
35            <p>This is a draggable containing a script that uses 'jQuery.append'.</p>
36            <script type="text/javascript">
37                 jQuery("#item2").append("This will not break drag and drop");
38            </script>
39        </div>
40
41          </div> 
42     
43      <script type="text/javascript">
44        // Init drag and drop
45        jQuery(".item").draggable({
46            refreshPositions: true,
47            scroll: true,
48            helper: function(){
49                var avatar = jQuery(this).clone();
50                avatar.removeAttr("id");
51                avatar.removeClass("ui-droppable");
52                avatar.removeClass("inner-item");
53                return avatar;
54            }
55        });
56       
57        jQuery("#outer-container").droppable({
58            accept: ".item",
59            greedy: true,
60            tolerance: "pointer",
61            drop: function(e, ui){
62                jQuery(this).append(ui.draggable);
63            }
64        });
65       
66      </script> 
67        </body>
68</html>