Welcome to AjaxDaddy.com
A large collection of nifty web 2.0 demos
Home
Demos
Send me a message
Ajax Books
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.
Visit PhpDaddy.com
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
Name
Url
Comment
Captcha
1
Bert
2008-07-06 19:02:25
Should mention you can open a bunch of windows at once.
2
Jake
2008-05-26 15:42:33
It seems that with dragable embedded live video, the audio is echoing.. any ideas?
3
Xrvel
2007-10-04 01:31:43
What if i want to copy the text within the dragable DIV ?
4
Deadelius
2007-08-08 09:58:07
yeah, great work!
5
It2051229
2007-07-07 05:41:02
great great.. keep in comming.. hehehehe
