PHP+jQuery+Ajax漂亮的许愿墙效果

之前我们讲了PHP+MySQL+jQueryUI完美便签条http://www.sucaihuo.com/js/70.html，今天我们在此基础上做一个漂亮的许愿墙效果。

许愿墙效果演示与下载：http://www.sucaihuo.com/php/136.html

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 .= "<dl class='paper a" . $row['color'] . "'  style='left:" . $left . "px;top:" . $top . "px;z-index:" . $zindex . "' data-id=" . $row['id'] . "> 
<dt><span class='username'>" . $row['name'] . "</span><span class='num'>" . $row['id'] . "</span></dt> 
<dd class='content'>" . $row['content'] . "</dd> 
<dd class='bottom'><span class='time'>" . tranTime($time) . "</span><a class='close' href='javascript:void(0);'></a></dd> 
</dl>";

接着我们把许愿列表放到.container里面：

<div class="container"style="position: relative"> 
  <?php echo $notes; ?> 
</div>

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"; 
}

我们再看下添加许愿代码：

<div class="add"> 
      <a href="add_note.html" id="fancy" class="add_note"></a> 
</div>

通过fancybox插件弹出add_note.html，add_note.html表单代码如下：

<div id='send-form'> 
    <p class='title'><span>许下你的愿望</span><a  id='box_close'></a></p> 
    <form action="" name='wish'> 
        <div class="per"> 
            <label for="username">昵称：</label> 
            <input type="text" name='username' id='username'/> 
        </div> 
        <div class="per"> 
            <label for="content">愿望：(您还可以输入 <span id='font-num'>50</span> 个字)</label> 
            <textarea name="content" id='content'>

添加许愿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 = "<dl class='paper a" + color_id + " ui-draggable' data-id='" + msg + "' style='left:" + left + "px;top:" + top + "px;z-index:" + zIndex + "'>\n\ 
<dt><span class='username'>" + username + "</span><span class='num'>6</span></dt>\n\ 
<dd class='content'>" + txt + "</dd><dd class='bottom'><span class='time'>刚刚</span>\n\ 
<a class='close' href='javascript:void(0);'></a></dd></dl>"; 
                $(".container").append(str); 
                make_draggable($('dl')); 
                $.fancybox.close(); 
            } else { 
                alert(msg); 
            } 
        }); 
        e.preventDefault(); 
    });

表单里面的表情尚未做，有兴趣的可以自己做下，我们将在后面添加表情代码，敬请关注。不明白jqueryUI的API可以参考：http://www.sucaihuo.com/js/68.html。