CREATE TABLE IF NOT EXISTS `notes` (   
  `id` int(11) NOT NULL auto_increment,   
  `content` varchar(200) NOT NULL,   
  `color` enum('yellow','blue','green') NOT NULL default 'yellow',   
  `xyz` varchar(100) default NULL,   
  PRIMARY KEY  (`id`)   
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;  

include_once('connect.php'); //链接数据库   
$notes = '';     
$left='';     
$top='';     
$zindex='';     
$query = mysql_query("select * from notes order by id desc");   
while($row=mysql_fetch_array($query)){   
    list($left,$top,$zindex) = explode('|',$row['xyz']);    
    $notes.= '   
    
.$zindex.'">   
        '.$row['id'].'.'.htmlspecialchars($row['content']).'   
    

注意，我在生成的每个DIV.note中定义了位置，即设置该div的left,top和z-index值。

CSS

.demo{position:relative; height:500px; margin:20px; border:1px dotted #d3d3d3}   
.note{width:150px; height:150px; position:absolute; margin-top:150px; padding:10px;   
 overflow:hidden; cursor:move; font-size:16px; line-height:22px;}   
.note span{margin:2px}   
   
.yellow{background-color:#FDFB8C;border:1px solid #DEDC65;}   
.blue{background-color:#A6E3FC;border:1px solid #75C5E7;}   
.green{background-color:#A5F88B;border:1px solid #98E775;}  

有了样式之后，然后运行drag.php，这时就可以看到页面中排列的的几个层，但是还不能拖动，因为还要加入jQuery。

jQuery

首先需要载入jquery库和jquery-ui插件以及global.js。

然后再global.js加入代码：

$(function(){   
    var tmp;   
       
    $('.note').each(function(){   
        tmp = $(this).css('z-index');   
        if(tmp>zIndex) zIndex = tmp;   
    })   
    make_draggable($('.note'));   
});   
var zIndex = 0;  

global.js中，首先在$(function()里定义了一个变量tmp，通过判断每个div.note的z-index值，保证拖动时，该DIV在最上层(即z-index为***值)，就是不会被别的层覆盖。

并且设置zIndex的初始值为0。

接下来，写了一个函数make_draggable();该函数调用jquery ui插件的Draggable方法，处理拖动范围，透明度及拖动停止后执行的更新操作。

function make_draggable(elements){   
    elements.draggable({   
        opacity: 0.8,   
        containment:'parent',   
        start:function(e,ui){ ui.helper.css('z-index',++zIndex); },   
        stop:function(e,ui){   
            $.get('update_position.php',{   
                  x        : ui.position.left,   
                  y        : ui.position.top,   
                  z        : zIndex,   
                  id    : parseInt(ui.helper.find('span.data').html())   
            });   
        }   
    });   
}  

当拖动时，将当前层的z-index属性设置为***值，即保证当前层在最上面，不被其他层覆盖，并且设置了拖动范围和透明度，当停止拖动时，向后台update_position.php发送一个ajax请求，传递的参数有x,y,z和id的值。接下来我们来看update_position.php的处理。

update_position.php保存拖动位置

update_position.php需要做的是，获取前台通过ajax请求发来的数据，更新数据表中相应的字段内容。

include_once('connect.php');   
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 notes SET xyz='".$x."|".$y."|".$z."' WHERE id=".$id);   
   
echo "1";  

如此完成了拖动并实时保存的效果。

原文链接：http://www.helloweba.com/view-blog-120.html

【编辑推荐】

1. jQuery拖动布局实现排序结果同步数据库
2. jQuery的.bind()、.live()和.delegate()之间区别
3. 分享7个用jQuery重写的经典在线小游戏
4. 25个超棒的jQuery日历和日期选取插件
5. 分享10个超炫的jQuery网站