并且设置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";