PHP+MySQL+jQueryでドラッグレイヤー位置コード共有のドラッグ保存を実現

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

ページ上でレイヤーをドラッグしたい場合は、jQuery ui の Draggable メソッドを完全に使用できます。この記事では、ドラッグ後にレイヤーの位置を保存する方法を説明します。この記事では、PHP+MySQL+jQuery を使用してレイヤーを自由にドラッグし、ドラッグ位置を即座に保存する方法について説明します。 前に...

ページ上でレイヤーをドラッグしたい場合は、jQuery ui の Draggable メソッドを完全に使用できます。では、ドラッグ後にレイヤーの位置を保存する方法は、この記事で解決されます。この記事では、PHP+MySQL+jQuery を使用してレイヤーを自由にドラッグし、ドラッグ位置を即座に保存する方法について説明します。

以前、jQuery でドラッグ レイアウトを実装し、並べ替え結果をデータベースに保存するという記事がありました。この記事では、プロジェクトを例としてドラッグ レイアウトの実装方法を説明しています。この記事との違いは、どこにでもドラッグできることです
ページ位置の原理は、ドラッグすることで、ドラッグされたレイヤーの左、上、および Z インデックスの相対位置を、データ テーブル内の対応するレコードに更新することです。ページは、CSS
を通じて各レイヤーのさまざまなビットを解析します。 セット。具体的な実装手順をご覧ください。

MySQL データテーブルの準備

まず、レイヤーの内容、背景色、座標、その他の情報を記録するためのテーブルノートを準備する必要があります。

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'].'" class="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 の左、上、および Z インデックスの値を設定します。

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 では、変数 tmp が最初に $(function()) で定義され、各 div.note の z-index 値を判断することで、DIV が最上位 (つまり z-) にあることが保証されます。ドラッグ時のインデックス) が最大値)、つまり、他のレイヤー

に覆われません。

そして、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 は、パラメーター x、y、z、および id 値を渡して、ajax リクエストを送信します。次に見てみましょう
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";