Bug Tracker

Ticket #2887: writeln.html

File writeln.html, 2.5 KB (added by michelled, September 08, 2008 02:59PM UTC)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        
        <style type="text/css">
            div { border: 1px solid }
            #outer-container {background-color: #FFFF99; height: 600px}
            .item {background-color: #99FFFF; width: 50%}
        </style>
 
        <script type="text/javascript" src="../../../../fluid-components/js/jquery/jquery-1.2.6.js"></script>
        <script type="text/javascript" src="../../../../fluid-components/js/jquery/ui.core.js"></script>
        <script type="text/javascript" src="../../../../fluid-components/js/jquery/ui.draggable.js"></script>
        <script type="text/javascript" src="../../../../fluid-components/js/jquery/ui.droppable.js"></script>
		<title>Writeln Example</title>
	</head>
	<body>
	  <h1> Writeln Test </h1>
      <p>
          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. 
      </p>
	  <div id="outer-container">
	    <h1>Container</h1>
	    This is the container. It is a droppable.
        <div id="item1" class="item">
            <h1> Item 1</h1>
            <p>This is a draggable containing a script that does a 'document.writeln'.</p>
            <script type="text/javascript">
                document.writeln("This will break drag and drop");
            </script> 
        </div>
        <div id="item2" class="item">
            <h1>Item 2</h1>
            <p>This is a draggable containing a script that uses 'jQuery.append'.</p>
            <script type="text/javascript">
                 jQuery("#item2").append("This will not break drag and drop");
            </script>
        </div>

	  </div> 
      
      <script type="text/javascript">
        // Init drag and drop
        jQuery(".item").draggable({
            refreshPositions: true,
            scroll: true,
            helper: function(){
                var avatar = jQuery(this).clone();
                avatar.removeAttr("id");
                avatar.removeClass("ui-droppable");
                avatar.removeClass("inner-item");
                return avatar;
            }
        });
        
        jQuery("#outer-container").droppable({
            accept: ".item",
            greedy: true,
            tolerance: "pointer",
            drop: function(e, ui){
                jQuery(this).append(ui.draggable);
            }
        });
        
      </script>  
	</body>
</html>

Download in other formats:

Original Format