jQueryUI完美许愿墙

相信很多网友见过类似许愿墙的程序，用户可以在网页上贴个许愿的纸条，并且可以拖动到页面的任意位置上。今天我要给大家演示的是使用PHP+MySQL+jQuery实现一个工作当中用到的贴便签纸的功能。

许愿墙网页特效演示：http://www.sucaihuo.com/php/70.html
添加许愿条：

$("#addbtn").live('click', function(e) { 
        var txt = $("#note_txt").val(); 
        var user = $("#user").val(); 
        var color = $("#mycolor").val(); 
        if (txt == "") { 
            $("#msg").html("内容不能为空"); 
            $("#note_txt").focus(); 
            return false; 
        } 
        if (user == "") { 
            $("#msg").html("请输入您的姓名！"); 
            $("#user").focus(); 
            return false; 
        } 
        var left = 0; 
                var top = 0; 
        var data = { 
            'zIndex': ++zIndex, 
            'content': txt, 
            'user': user, 
            'color': color, 
            'left':left, 
            'top':top 
        }; 
        $.post('posts.php', data, function(msg) { 
            zIndex = zIndex++; 
            //alert(zIndex); 
            if (parseInt(msg)) { 
                 
                var str = "<div class='note " + color + "' style='left:"+left+";top:"+top+";z-index:" + zIndex + "'><span class='data'>" + msg + ".</span>" + txt + "<p>——" + user + "(刚刚)</p></div>"; 
                $(".container").append(str); 
                make_draggable($('.note')); 
                $.fancybox.close(); 
            } else { 
                $("#msg").html(msg); 
            } 
        }); 
        e.preventDefault(); 
    });