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=utf8;  
 

然後向表中插入幾條記錄，注意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.= "   
  
    <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";  
 

如此完成了拖動並即時儲存的效果。

原文連結：http://www.helloweba.com/view-blog-120.html