PHP+jQuery實現隨意拖動層並即時儲存拖動位置，jquery拖動

PHP+jQuery實現隨意拖動層並即時儲存拖動位置，jquery拖動

想拖動頁面上的層，完全可以用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())       });     }   }); } 

當拖動時，將當前層的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"; 

以上所述就是本文的全部內容了，希望大家能夠喜歡。