PHP jQueryはレイヤーを自由にドラッグし、ドラッグ位置を瞬時に保存することを実現_jquery

ページ上でレイヤーをドラッグしたい場合は、jQuery ui の Draggable メソッドを完全に使用できます。では、ドラッグ後にレイヤーの位置を保存するにはどうすればよいでしょうか。この記事ではその答えを紹介します。この記事では、PHP MySQL 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'].'" 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"> 
  <&#63;php echo $notes;&#63;> 
</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 に 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"; 

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。