Making HTML page sections into draggable blocks
This class can be used make certain HTML page sections into draggable blocks.
It generates start and end div tags and the necessary Javascript to intercept the events of when the user clicks and drags the block inside the div.
The class can assign given Javascript function to handle the event of when the mouse button is released.
Also this class is Public domain, that mean that you are legaly free to copy, redistribute, modify and also include into close source projects for free
Here is a simple test how to use it
<?php/*
** gWidgets!
** Cesar D. Rodas (saddor@cesarodas.com)
**
** The author disclaims the copyright of this code
*/
require(“gWidgets.php”);
$wid = new gWidgets;
$wid->widgets(‘test’,‘test2′); //Registering widgets names for furute declaration
?><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Testing Cesar D. Rodas’ gWidget class</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<?php echo $wid->Javascript();?>
<style>
body {
font-family: arial, verdana;
font-size: 12px;
}
.titulo {
font-weight: bold;
font-size: 14px;
}
td {
font-size: 12px;
}
</style>
</head>
<body>
<center>
<h1>Testing Cesar D. Rodas’ gWidget class</h1>
<hr>
<?php for ($i=0; $i < 150; $i++) echo “<br>\n”;?>
</center>
<?php $wid->newWid(‘test’,‘absolute’,0,200,200); //begining widget HTML?>
<table width=”100%” height=”100%” cellspacing=”0″ cellpadding=”3″>
<tr>
<td height=”20″ class = “titulo” bgcolor=”#000066″><font color=”#FFFFFF”>Window title</font></td>
</tr>
<tr>
<td bgcolor=”#CCCCCC”>This a simple test for a not-top-fixed gWidget!<br>
<hr>
<strong>Test 2 X</strong>: <span id=”t2_x”></span><br/>
<strong>Test 2 Y</strong>: <span id=”t2_y”></span>
</td>
</tr>
</table>
<?php $wid->endWid(); //end widget HTML ?>
<?php $wid->newWid(‘test2′,‘fixed’,200,200,300,150,“test2NewPos”); //begining widget HTML?>
<table width=”100%” height=”100%” cellspacing=”0″ cellpadding=”3″>
<tr>
<td height=”20″ class = “titulo” bgcolor=”#000066″><font color=”#FFFFFF”>Window title</font></td>
</tr>
<tr>
<td bgcolor=”#CCCCCC” valign=”top”>This a simple test for a top-fixed gWidget!. Also this test, for every movement call to a JS function with the new X,Y I think this feature is important for save the last-position by AJAX.<br><br>
Powered by <a href=”http://cesars.users.phpclasses.org/gwidget”>gWidget</a></td>
</tr>
</table>
<?php $wid->endWid(); //end widget HTML?>
<script>
/*
** This gWidget will have a call the follow function at everytime
** that the test2 is moved. Usefull for save by AJAX the last
** position.
*/
function test2NewPos(x,y) {
elem = document.getElementById(’t2_x’);
elem.innerHTML = x;
elem = document.getElementById(’t2_y’);
elem.innerHTML = y;
}
</script>
</body>
</html>
Share and Enjoy:
These icons link to social bookmarking sites where readers can share and discover new web pages.
July 29th, 2007 at 12:51 pm
Hi. I just downloaded this class from phpclasses.org. It’s very nice and useful for me so I just wanted to say thanks!
July 30th, 2007 at 11:13 am
Your welcome…