Next Prev

Dragable Content

Read more and download "Dragable Content"

You make elements draggable by assigning them to the class "dragableElement".
You can configure the script to remember the position of the dragable elements in a cookie.

Here is a quick way to run your own popurls style website

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.ajaxdaddy.com/web20/dragable-content/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
	<title>Dragable content</title>
	<link href="css/dragable-content.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<script type="text/javascript">
	var rememberPositionedInCookie = true;
	var rememberPosition_cookieName = 'demo';
	</script>	
	
<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/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ë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ë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ë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ë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>
<script type="text/javascript" src="javascript/dragable-content.js"></script>
</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

User

2008-11-11 03:53:38

The only problem with these drag i see is â€¦the boxes are overlapped when draggedâ€¦.if the boxes were swapped when one box was moved over anotherâ€¦it would have been much professional effectâ€¦with some css designs hope it will be done (may be defining some area first and then drag with in these areas..)

Bert

2008-07-06 19:02:25

Should mention you can open a bunch of windows at once.

Jake

2008-05-26 15:42:33

It seems that with dragable embedded live video, the audio is echoing.. any ideas?

Xrvel

2007-10-04 01:31:43

What if i want to copy the text within the dragable DIV ?

Deadelius

2007-08-08 09:58:07

yeah, great work!

It2051229

2007-07-07 05:41:02

great great.. keep in comming.. hehehehe

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Dragable Content

You make elements draggable by assigning them to the class "dragableElement".
You can configure the script to remember the position of the dragable elements in a cookie.

Comment on this example

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Dragable Content

You make elements draggable by assigning them to the class "dragableElement". You can configure the script to remember the position of the dragable elements in a cookie.

Comment on this example

You make elements draggable by assigning them to the class "dragableElement".
You can configure the script to remember the position of the dragable elements in a cookie.