ajax+php實現(xiàn)鼠標(biāo)任意拖動層并實時保存
來源：程序員人生 發(fā)布時間：2014-04-08 03:28:51 閱讀次數(shù)：2830次
網(wǎng)(LieHuo.Net)教程 今天小編在博客園看到這樣一個例子《ajax+php鼠標(biāo)拖動層至任意位置并實時保存》，非常實用，特別轉(zhuǎn)載給各位站長，希望對您建站有所幫助和提醒，以下為引用原作者的內(nèi)容：
注意，刪除功能和修改沒有，不過這個很簡單，也不影響本例程的演示
示意圖
| 以下為引用的內(nèi)容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ajax+php鼠標(biāo)拖動層至任意位置并實時保存 - 網(wǎng)（Liehuo.Net）</title>
</head>
<STYLE> /*****定義鼠標(biāo)樣式******/
.btnpic
{
CURSOR: pointer
}
.gbPicDiv
{
BACKGROUND-IMAGE: url(329_205754.gif); WIDTH: 168px; CURSOR: move; HEIGHT: 131px;
}
/******定義鼠標(biāo)樣式完畢*****/ .say /**標(biāo)題**/
{
font-size:12px;
color:#FF0000;
}
.content /***鼠標(biāo)滑出的時候內(nèi)容的class**/
{
font-size:12px;
color:#0099FF;
}
.contenth /***鼠標(biāo)滑過的時候內(nèi)容的class****/
{
color:#9933FF;
font-size:12px;
}
.del /***管理 刪除 的 class***/
{
font-size:12px;
color:#333399;
text-decoration:none;
}
.del:hover /***管理 刪除 經(jīng)過時候的 class***/
{
font-size:16px;
color:#333399;
text-decoration:none;
}
</STYLE>
<script type="text/javascript" src="1.js"></script>
<body> <?php require('sql.php'); //--------------要執(zhí)行的SQL語句
$sql="select * from `ceng` order by `zzhou` asc";
//--------------進(jìn)行資料庫的查詢
$result=mysql_query($sql,$cn);
$i=1;
while( $row=mysql_fetch_row($result) )
{
//print_r($row);
?>
<DIV onmouseup=upDrag('<?=$row[0]?>') onmousedown=initDrag(event)
style="Z-INDEX: <?=$i?>; POSITION: absolute;left: <?=$row[2]?>px; top: <?=$row[3]?>px;">
<DIV class=gbPicDiv id="<?=$row[0]?>" align="center">
<br />
<table width="140" align="center">
<tr>
<td><span class="say"><?=$row[4]?>說到</span></td>
</tr>
<tr>
<td><div id="<?=$row[0]?>a" class="content" align="left" onmouseout="return out('<?=$row[0]?>a')" onmouseover="return over('<?=$row[0]?>a')"> <?=$row[1]?></div></td>
</tr>
</table>
<div align="center"><a href="tian.php" class="del">新增</a> <a href="#" class="del" onclick="return del('修改');">修改</a> <a href="#" class="del" onclick="return del('刪除');">刪除</a></div>
</DIV>
</DIV>
<?php
$i++;
}
?>
<?php
$sql1="select max(zzhou) from ceng"; //求出層的最大值
$result1=mysql_query($sql1);
$row1=mysql_fetch_row($result1);
?>
<input type="hidden" name="count" value="<?=$row1[0]+1?>" id="count"/>
</BODY>
</HTML> |
本教程實例下載：ajax_php_drag.rar
原文：http://www.cnblogs.com/zerogo/archive/2009/08/19/1550223.html
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進(jìn)行捐贈
