PHP+MySQL+jQuery はドラッグとドラッグ中のレイヤー位置の保存を実装します

　　想拖动页面上的层，完全可以用jQuery ui的Draggable方法来实现，那如何将拖动后层的位置保存下来呢?本文将给出答案。本文讲解了如何采用PHP+MySQL+jQuery，实现随意拖动层并即时保存拖动位置。

　　

　　之前我有文章：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=utf

 

　　然后向表中插入几条记录，注意xyz字段表示的是层的xyz坐标的组合，格式为"xyz"。

　　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.= '
   

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

';
}

 

　　然后将读取出来的$notes现在在div中。

   

生成された各 DIV.note で位置を定義したことに注意してください。つまり、div の左、上、および z-index 値を設定しました。

CSS

.demo{位置:相対;高さ:500px;マージン:1px 点線 #d3d3d3}
.note{幅:150px; 高さ:150px; 位置:絶対余白:10px; オーバーフロー:非表示; カーソル:移動; フォントサイズ:16px;}
.note スパン{マージン:2px}

. yellow{background-color:#FDFB8C;border:1px ソリッド #DEDC65;}
.blue{背景色:#A6E3FC;ボーダー:1px ソリッド #75C5E7;}
.green{背景色:#A5F88B;ボーダー:1px ソリッド #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 では、変数 tmp が最初に $(function()) で定義され、各 div.note の z-index 値を判断することで、ドラッグ時に DIV が先頭にあることが保証されます。 z-index は最大値です)、他のレイヤー

にはカバーされません。

そして、zIndex の初期値を 0 に設定します。

次に、関数 make_draggable() を作成しました。この関数は、jquery ui プラグインの Draggable メソッドを呼び出し、ドラッグの停止後に実行されるドラッグ範囲、透明度、および更新操作を処理します。

関数 make_draggable(elements){

elements.draggable({

不透明度: 0.8、

包含:'親'、

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