|
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Dragable content</title>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
/* CSS NEEDED ONLY IN THE DEMO */
|
|
|
|
|
body{
|
|
|
|
|
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
|
|
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
|
|
|
|
margin:0px;
|
|
|
|
|
padding:0px;
|
|
|
|
|
text-align:center;
|
|
|
|
|
background-color:#E2EBED;
|
|
|
|
|
font-size:0.9em;
|
|
|
|
|
}
|
|
|
|
|
#mainContainer{
|
|
|
|
|
width:760px;
|
|
|
|
|
margin:0 auto;
|
|
|
|
|
text-align:left;
|
|
|
|
|
background-color:#FFF;
|
|
|
|
|
border:1px solid #317082;
|
|
|
|
|
padding:5px;
|
|
|
|
|
}
|
|
|
|
|
#mainContainer img{
|
|
|
|
|
padding:3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#keyText{
|
|
|
|
|
float:right;
|
|
|
|
|
margin-top:5px;
|
|
|
|
|
margin-top:5px;
|
|
|
|
|
margin-bottom:5px;
|
|
|
|
|
border:1px dotted #000;
|
|
|
|
|
background-color:#E2EBED;
|
|
|
|
|
width:150px;
|
|
|
|
|
padding:2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#leftMenu{
|
|
|
|
|
width:145px;
|
|
|
|
|
float:left;
|
|
|
|
|
background-color:#E2EBED;
|
|
|
|
|
border:1px dotted #000;
|
|
|
|
|
padding:2px;
|
|
|
|
|
height:300px;
|
|
|
|
|
}
|
|
|
|
|
#leftMenu ul{
|
|
|
|
|
margin:0px;
|
|
|
|
|
}
|
|
|
|
|
#leftMenu ul li{
|
|
|
|
|
list-style-type:none;
|
|
|
|
|
}
|
|
|
|
|
#leftMenu ul li a{
|
|
|
|
|
color:#000;
|
|
|
|
|
font-weight:bold;
|
|
|
|
|
}
|
|
|
|
|
#mainContent{
|
|
|
|
|
width:595px;
|
|
|
|
|
float:left;
|
|
|
|
|
padding-left:10px;
|
|
|
|
|
}
|
|
|
|
|
.clear{
|
|
|
|
|
clear:both;
|
|
|
|
|
}
|
|
|
|
|
/* END CSS ONLY NEEDED FOR THE DEMO */
|
|
|
|
|
</style>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var rememberPositionedInCookie = true;
|
|
|
|
|
var rememberPosition_cookieName = 'demo';
|
|
|
|
|
</script>
|
|
|
|
|
<script type="text/javascript" src="js/dragable-content.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div id="mainContainer">
|
|
|
|
|
<div id="leftMenu" class="dragableElement">
|
|
|
|
|
<h2>Menu</h2>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="#">Ajax</a></li>
|
|
|
|
|
<li><a href="#">DHTML</a></li>
|
|
|
|
|
<li><a href="#">Calendar scripts</a></li>
|
|
|
|
|
<li><a href="#">Menu scripts</a></li>
|
|
|
|
|
<li><a href="#">Misc scripts</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div id="mainContent">
|
|
|
|
|
<p><img src="/images/heading3.gif" class="dragableElement">
|
|
|
|
|
<p><img src="images/image5.jpg" style="float:left" class="dragableElement">You can "redesign" the elements on this page by dragging and dropping them wherever you want.</p>
|
|
|
|
|
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat,
|
|
|
|
|
contra si tendere pergas,propterea quia vis magnast ipsius et altea<EFBFBD>ra per
|
|
|
|
|
purum simulacra ferunturet feriunt oculos turbantia composituras. Praeterea splendor qui cumque est acer adurit saepe oculos ideo quod semina
|
|
|
|
|
possidet ignismulta, dolorem oculis quae gignunt insinuando.lurida praeterea fiunt quae cumque tuenturarquati,
|
|
|
|
|
quia luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, multaque sunt oculis in eorum denique mixta,quae contage sua
|
|
|
|
|
palloribus omnia pingunt. luroris de corpore eorumsemina multa fluunt simulacris obvia rerum</p>
|
|
|
|
|
<p><img src="images/image2.jpg" style="float:right" class="dragableElement">Splendida porro oculi fugitant vitantque tueri. sol etiam caecat,
|
|
|
|
|
contra si tendere pergas,propterea quia vis magnast ipsius et altea<EFBFBD>ra per
|
|
|
|
|
purum simulacra ferunturet feriunt oculos turbantia composituras. Praeterea splendor qui cumque est acer adurit saepe oculos ideo quod semina
|
|
|
|
|
possidet ignismulta, dolorem oculis quae gignunt insinuando.lurida praeterea fiunt quae cumque tuenturarquati,
|
|
|
|
|
quia luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, multaque sunt oculis in eorum denique mixta,quae contage sua
|
|
|
|
|
palloribus omnia pingunt. luroris de corpore eorumsemina multa fluunt simulacris obvia rerum</p>
|
|
|
|
|
<p><img src="images/image4.jpg" style="float:left" class="dragableElement">Splendida porro oculi fugitant vitantque tueri. sol etiam caecat,
|
|
|
|
|
contra si tendere pergas,propterea quia vis magnast ipsius et altea<EFBFBD>ra per
|
|
|
|
|
purum simulacra ferunturet feriunt oculos turbantia composituras. Praeterea splendor qui cumque est acer adurit saepe oculos ideo quod semina
|
|
|
|
|
possidet ignismulta, dolorem oculis quae gignunt insinuando.lurida praeterea fiunt quae cumque tuenturarquati,
|
|
|
|
|
quia luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, multaque sunt oculis in eorum denique mixta,quae contage sua
|
|
|
|
|
palloribus omnia pingunt. luroris de corpore eorumsemina multa fluunt simulacris obvia rerum</p>
|
|
|
|
|
<p><div id="keyText" class="dragableElement">You can drag this <b>box</b> as well as the images on this page</div>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat,
|
|
|
|
|
contra si tendere pergas,propterea quia vis magnast ipsius et altea<EFBFBD>ra per
|
|
|
|
|
purum simulacra ferunturet feriunt oculos turbantia composituras. Praeterea splendor qui cumque est acer adurit saepe oculos ideo quod semina
|
|
|
|
|
possidet ignismulta, dolorem oculis quae gignunt insinuando.lurida praeterea fiunt quae cumque tuenturarquati</p>
|
|
|
|
|
<div id="keyText" class="dragableElement">AJAX = Asyncron Javascript and XML - It is used to create webpages with more user interactivity.</div>
|
|
|
|
|
<P>quia luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, multaque sunt oculis in eorum denique mixta,quae contage sua
|
|
|
|
|
palloribus omnia pingunt. luroris de corpore eorumsemina multa fluunt simulacris obvia rerum</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="clear"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|