PHP+Msql+Ajax实现便签条

相信很多网友见过类似许愿墙的程序，用户可以在网页上贴个许愿的纸条，并且可以拖动到页面的任意位置上。今天我要给大家演示的是使用PHP+MySQL+jQuery实现一个工作当中用到的贴便签纸的功能。
添加便签条
$("#addbtn").live('click', function(e) { <br>         var txt = $("#note_txt").val(); <br>         var user = $("#user").val(); <br>         var color = $("#mycolor").val(); <br>         if (txt == "") { <br>             $("#msg").html("内容不能为空"); <br>             $("#note_txt").focus(); <br>             return false; <br>         } <br>         if (user == "") { <br>             $("#msg").html("请输入您的姓名！"); <br>             $("#user").focus(); <br>             return false; <br>         } <br>         var left = 0; <br>                 var top = 0; <br>         var data = { <br>             'zIndex': ++zIndex, <br>             'content': txt, <br>             'user': user, <br>             'color': color, <br>             'left':left, <br>             'top':top <br>         }; <br>         $.post('posts.php', data, function(msg) { <br>             zIndex = zIndex++; <br>             //alert(zIndex); <br>             if (parseInt(msg)) { <br>                  <br>                 var str = "<div> <span>" + msg + ".</span>" + txt + "<p>——" + user + "(刚刚)</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/xiazai/code/9265"> <img src="https://img.php.cn/upload/webcode/000/000/015/175850640594515.jpg" alt="DirCMS内容管理系统6.0"> </a> <div class="aritcle_card_info"> <a href="/xiazai/code/9265">DirCMS内容管理系统6.0</a> <p>DirCMS内容管理系统，是国内自主研发的一款功能强大而又不失小巧简洁的由PHP+Mysql架构的内容管理系统。DirCMS代码全部开源，便于使用者二次开发或定制；并采用简洁的模板标签技术，使制作模板更加容易，一般情况下，用DirCMS架构一个企业站只需半天时间即可，真正实现功能的简洁，实用，强大，灵活。可广泛应用于架构各类门户站，下载站，企业站，工作室等站点。</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="DirCMS内容管理系统6.0"> <span>0</span> </div> </div> <a href="/xiazai/code/9265" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="DirCMS内容管理系统6.0"> </a> </div> </div>"; <br>                 $(".container").append(str); <br>                 make_draggable($('.note')); <br>                 $.fancybox.close(); <br>             } else { <br>                 $("#msg").html(msg); <br>             } <br>         }); <br>         e.preventDefault(); <br>     });便签条添加和浏览演示效果：http://www.sucaihuo.com/js/70.html

AD：真正免费，域名+虚机+企业邮箱=0元