PHP+MySQL+jQuery实现拖动并保存拖动层位置

　　想拖动页面上的层，完全可以用jQuery ui的Draggable方法来实现，那如何将拖动后层的位置保存下来呢?本文将给出答案。本文讲解了如何采用PHP+MySQL+jQuery，实现随意拖动层并即时保存拖动位置。

　　准备MySQL数据表

　　首先需要准备一张表notes，用来记录层的内容，背景色和坐标等信息。

　　CREATE TABLE IF NOT EXISTS `notes` (

　　`id` int(11) NOT NULL auto_increment,

　　`content` varchar(200) NOT NULL,

　　`color` enum('yellow','blue','green') NOT NULL default 'yellow',

　　`xyz` varchar(100) default NULL,

　　PRIMARY KEY (`id`)

　　) ENGINE=MyISAM DEFAULT CHARSET=utf

　　然后向表中插入几条记录，注意xyz字段表示的是层的xyz坐标的组合，格式为"x|y|z"。

　　drag.php

　　在drag.php中，需要读取notes表中的记录，显示在drag.php页面中，代码如下：

include_once('connect.php'); //链接数据库
$notes = '';  
$left='';  
$top='';  
$zindex='';  
$query = mysql_query("select * from notes order by id desc");
while($row=mysql_fetch_array($query)){
    list($left,$top,$zindex) = explode('|',$row['xyz']); 
    $notes.= '
    <div class="note '.$row['color'].'" style="left:'.$left.'px;top:'.$top.'px;z-index:'
.$zindex.'">
        <span class="data">'.$row['id'].'.</span>'.htmlspecialchars($row['content']).'
    </div>';
}

　　然后将读取出来的$notes现在在div中。

<div class="demo">
    <?php echo $notes;?>
</div>

　　注意，我在生成的每个DIV.note中定义了位置，即设置该div的left,top和z-index值。

　　CSS

.demo{position:relative; height:500px; margin:20px; border:1px dotted #d3d3d3}
.note{width:150px; height:150px; position:absolute; margin-top:150px; padding:10px;
 overflow:hidden; cursor:move; font-size:16px; line-height:22px;}
.note span{margin:2px}
 
.yellow{background-color:#FDFB8C;border:1px solid #DEDC65;}
.blue{background-color:#A6E3FC;border:1px solid #75C5E7;}
.green{background-color:#A5F88B;border:1px solid #98E775;}

　　有了样式之后，然后运行drag.php，这时就可以看到页面中排列的的几个层，但是还不能拖动，因为还要加入jQuery。

　　jQuery

　　首先需要载入jquery库和jquery-ui插件以及global.js。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!