相信很多网友见过类似许愿墙的程序，用户可以在网页上贴个许愿的纸条，并且可以拖动到页面的任意位置上。今天我要给大家演示的是使用PHP+MySQL+jQuery实现一个工作当中用到的贴便签纸的功能。
首先我们引入jQuery库、拖动插件jqueryui及弹出层插件fancybox：
<script type="text/javascript" src="jquery.js"></script> <script type='text/javascript' src='js/jquery-ui.min.js'></script> <script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.js"></script>
然后我们在notes表里面读取便签条：
$query = mysql_query("select * from notes order by id desc limit 0, 50");
while ($row = mysql_fetch_array($query)) {
list($left, $top, $zindex) = explode('|', $row['xyz']);
$time = strtotime($row['addtime']);
$notes.= '
<div class="note ' . $row['color'] . '" data-id=' . $row['id'] . ' style="left:' . $left . 'px;top:' . $top . 'px;z-index:' . $zindex . '" id="note_' . $row['id'] . '">
<span class="data">' . $row['id'] . '.</span>' . htmlspecialchars($row['content']) . '
<p class="user">——' . htmlspecialchars($row['name']) . '<br/>(' . tranTime($time) . ')</p><a class="close"></a>
</div>';
}最后附上数据库信息：
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,
`name` varchar(30) default NULL,
`addtime` datetime default NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
