之前我们讲了PHP+MySQL+jQueryUI完美便签条/js/70.html，今天我们在此基础上做一个漂亮的许愿墙效果。
下载资源
下载积分：
150
积分
HTML
首先我们遍历出所有的许愿列表： $query = mysql_query("select * from wishing_wall 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 .= "
" . $row['name'] . "" . $row['id'] . "" . $row['content'] . "" . tranTime($time) . "";
接着我们把许愿列表放到.container里面：
jQuery
通过jQueryUI拖动许愿墙悬浮层代码如下： var zIndex = 0;
function make_draggable(elements) {
elements.draggable({
handle: 'dt', //拖动把手
opacity: 0.8,
containment: 'parent', //拖动范围
start: function(e, ui) {
ui.helper.css('z-index', ++zIndex)
},
stop: function(e, ui) {
$.get('ajax.php?act=update_position', {
x: ui.position.left,
y: ui.position.top,
z: zIndex,
id: parseInt(ui.helper.attr("data-id"))
});
}
});
}
PHP
保存位置： $act = htmlspecialchars($_GET['act']);
if ($act == 'update_position') {
if (!is_numeric($_GET['id']) || !is_numeric($_GET['x']) || !is_numeric($_GET['y']) || !is_numeric($_GET['z']))
die("0");
$id = intval($_GET['id']);
$x = intval($_GET['x']);
$y = intval($_GET['y']);
$z = intval($_GET['z']);
mysql_query("UPDATE wishing_wall SET xyz='" . $x . "|" . $y . "|" . $z . "' WHERE id=" . $id);
echo "1";
}
我们再看下添加许愿代码：
通过fancybox插件弹出add_note.html，add_note.html表单代码如下：
许下你的愿望
昵称：
愿望：(您还可以输入50个字)
添加许愿jQuery代码： $("#addbtn").live('click', function(e) {
var txt = $("#content").val();
var username = $("#username").val();
if (txt == "") {
$("#content").focus();
return false;
}
if (username == "") {
$("#msg").html("请输入您的姓名！");
$("#user").focus();
return false;
}
var left = 0;
var top = 0;
var color_id = $("#color").children("li.current").attr("data-color-id");
var data = {
'zIndex': ++zIndex,
'content': txt,
'user': username,
'left': left,
'top': top,
"color_id": color_id
};
$.post('ajax.php?act=add', data, function(msg) {
zIndex = zIndex++;
if (parseInt(msg)) {
var str = "
" + username + "6" + txt + "刚刚\n\";
$(".container").append(str);
make_draggable($('dl'));
$.fancybox.close();
} else {
alert(msg);
}
});
e.preventDefault();
});
表单里面的表情尚未做，有兴趣的可以自己做下，我们将在后面添加表情代码，敬请关注。不明白jqueryUI的API可以参考：/js/68.html。
