想拖動頁面上(shàng)的層，完全可(kě)以用jQuery ui的Draggable方法來(lái)實現，那(nà)如何将拖動後層的位置保存下來(lái)呢？本文将給出答(dá)案。本文講解了如何采用PHP+MySQL+jQuery，實現随意拖動層并即時(shí)保存拖動位置。

之前我有(yǒu)文章：jQuery實現拖動布局并将排序結果保存到數(shù)據庫，文中以項目為(wèi)示例，講解了實現拖動布局的方法。本文與之不同之處在于可(kě)以任意拖動頁面位置，原理(lǐ)就是通(tōng)過拖動将拖動後層的相對位置left,top和(hé)z-index三個(gè)參數(shù)更新到數(shù)據表中對應的記錄，頁面通(tōng)過CSS解析每個(gè)層不同的位置。請(qǐng)看具體(tǐ)實現步驟。

準備MySQL數(shù)據表

首先需要準備一張表notes，用來(lái)記錄層的內(nèi)容，背景色和(hé)坐(zuò)标等信息。

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坐(zuò)标的組合，格式為(wèi)"x|y|z"。

drag.php

在drag.php中，需要讀取notes表中的記錄，顯示在drag.php頁面中，代碼如下：

include_once('connect.php'); //鏈接數(shù)據庫
$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.= '

	'.$row['id'].'.'.htmlspecialchars($row['content']).'

';
}

然後将讀取出來(lái)的$notes現在在div中。

注意，我在生(shēng)成的每個(gè)DIV.note中定義了位置，即設置該div的left,top和(hé)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;}

有(yǒu)了樣式之後，然後運行(xíng)drag.php，這時(shí)就可(kě)以看到頁面中排列的的幾個(gè)層，但(dàn)是還(hái)不能拖動，因為(wèi)還(hái)要加入jQuery。

jQuery

首先需要載入jquery庫和(hé)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()裏定義了一個(gè)變量tmp，通(tōng)過判斷每個(gè)div.note的z-index值，保證拖動時(shí)，該DIV在最上(shàng)層（即z-index為(wèi)最大(dà)值），就是不會(huì)被别的層覆蓋。

并且設置zIndex的初始值為(wèi)0。

接下來(lái)，寫了一個(gè)函數(shù)make_draggable()；該函數(shù)調用jquery ui插件的Draggable方法，處理(lǐ)拖動範圍，透明(míng)度及拖動停止後執行(xíng)的更新操作(zuò)。

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())
			});
		}
	});
}

當拖動時(shí)，将當前層的z-index屬性設置為(wèi)最大(dà)值，即保證當前層在最上(shàng)面，不被其他層覆蓋，并且設置了拖動範圍和(hé)透明(míng)度，當停止拖動時(shí)，向後台update_position.php發送一個(gè)ajax請(qǐng)求，傳遞的參數(shù)有(yǒu)x,y,z和(hé)id的值。接下來(lái)我們來(lái)看update_position.php的處理(lǐ)。

update_position.php保存拖動位置

update_position.php需要做(zuò)的是，獲取前台通(tōng)過ajax請(qǐng)求發來(lái)的數(shù)據，更新數(shù)據表中相應的字段內(nèi)容。

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";

如此完成了拖動并實時(shí)保存的效果，請(qǐng)看DEMO演示。

看完本文後，你(nǐ)是不是會(huì)想到拖動保存更多(duō)實際的應用呢，本站(zhàn)在接下來(lái)的文章會(huì)通(tōng)過貼便簽的實例來(lái)說明(míng)拖動保存的應用，敬請(qǐng)關注。