想拖曳頁面上的層，完全可以用jQuery ui的Draggable方法來實現，那要如何將拖曳後層的位置儲存下來呢？本文將給出答案。本文說明如何採用PHP MySQL jQuery，實作隨意拖曳層並即時儲存拖曳位置。
之前我有文章：，文中以項目為範例，講解了實作拖曳版面的方法。本文與之不同之處在於可以任意拖曳頁面位置，原理就是透過拖曳將拖曳後層的相對位置left,top和z-index三個參數更新到資料表中對應的記錄，頁面透過CSS解析每個層不同的位置。請看具體實現步驟。
準備MySQL資料表
首先要準備一張表格notes，用來記錄層的內容，背景色和座標等資訊。
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;
然後在表格中插入幾筆記錄，注意xyz欄位表示的是層的xyz座標的組合，格式為"x|y|z"。
drag.php
在drag.php中，需要讀取notes表中的記錄，顯示在drag.php頁面中，程式碼如下：
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.= '
<div class="note '.$row['color'].'" style="left:'.$left.'px;top:'.$top.'px;z-index:'
.$zindex.'">
<span class="data">'.$row['id'].'.</span>'.htmlspecialchars($row['content']).'
</div>';
}
然後將讀取出來的$notes現在在div中。
<div class="demo"> <?php echo $notes;?> </div>
注意，我在產生的每個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。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script>
然後再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())
});
}
});
}
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"; 
