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>";
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"; }
最后附上数据库信息:
CREATE TABLE IF NOT EXISTS `wishing_wall` ( `id` int(11) NOT NULL AUTO_INCREMENT, `content` varchar(200) NOT NULL, `color` int(3) DEFAULT '1', `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 ;