PHP+jQuery實(shí)現(xiàn)隨意拖動(dòng)層并即時(shí)保存拖動(dòng)位置

更新時(shí)間：2015年04月30日 15:04:44 投稿：hebedich

本文講解了如何采用PHP+MySQL+jQuery,實(shí)現(xiàn)隨意拖動(dòng)層并即時(shí)保存拖動(dòng)位置。十分的實(shí)用，有需要的小伙伴可以參考下。

想拖動(dòng)頁(yè)面上的層，完全可以用jQuery ui的Draggable方法來(lái)實(shí)現(xiàn)，那如何將拖動(dòng)后層的位置保存下來(lái)呢？本文將給出答案。本文講解了如何采用PHP+MySQL+jQuery，實(shí)現(xiàn)隨意拖動(dòng)層并即時(shí)保存拖動(dòng)位置。

之前我有文章：，文中以項(xiàng)目為示例，講解了實(shí)現(xiàn)拖動(dòng)布局的方法。本文與之不同之處在于可以任意拖動(dòng)頁(yè)面位置，原理就是通過(guò)拖動(dòng)將拖動(dòng)后層的相對(duì)位置left,top和z-index三個(gè)參數(shù)更新到數(shù)據(jù)表中對(duì)應(yīng)的記錄，頁(yè)面通過(guò)CSS解析每個(gè)層不同的位置。請(qǐng)看具體實(shí)現(xiàn)步驟。

準(zhǔn)備MySQL數(shù)據(jù)表

首先需要準(zhǔn)備一張表notes，用來(lái)記錄層的內(nèi)容，背景色和坐標(biāo)等信息。

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坐標(biāo)的組合，格式為"x|y|z"。

drag.php

在drag.php中，需要讀取notes表中的記錄，顯示在drag.php頁(yè)面中，代碼如下：

include_once('connect.php'); //鏈接數(shù)據(jù)庫(kù) 
$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>'; 
}

然后將讀取出來(lái)的$notes現(xiàn)在在div中。

<div class="demo"> 
  <?php echo $notes;?> 
</div>

注意，我在生成的每個(gè)DIV.note中定義了位置，即設(shè)置該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;}

有了樣式之后，然后運(yùn)行drag.php，這時(shí)就可以看到頁(yè)面中排列的的幾個(gè)層，但是還不能拖動(dòng)，因?yàn)檫€要加入jQuery。

jQuery

首先需要載入jquery庫(kù)和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()里定義了一個(gè)變量tmp，通過(guò)判斷每個(gè)div.note的z-index值，保證拖動(dòng)時(shí)，該DIV在最上層（即z-index為最大值），就是不會(huì)被別的層覆蓋。
并且設(shè)置zIndex的初始值為0。
接下來(lái)，寫(xiě)了一個(gè)函數(shù)make_draggable()；該函數(shù)調(diào)用jquery ui插件的Draggable方法，處理拖動(dòng)范圍，透明度及拖動(dòng)停止后執(zhí)行的更新操作。

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()) 
      }); 
    } 
  }); 
}

當(dāng)拖動(dòng)時(shí)，將當(dāng)前層的z-index屬性設(shè)置為最大值，即保證當(dāng)前層在最上面，不被其他層覆蓋，并且設(shè)置了拖動(dòng)范圍和透明度，當(dāng)停止拖動(dòng)時(shí)，向后臺(tái)update_position.php發(fā)送一個(gè)ajax請(qǐng)求，傳遞的參數(shù)有x,y,z和id的值。接下來(lái)我們來(lái)看update_position.php的處理。
update_position.php保存拖動(dòng)位置
update_position.php需要做的是，獲取前臺(tái)通過(guò)ajax請(qǐng)求發(fā)來(lái)的數(shù)據(jù)，更新數(shù)據(jù)表中相應(yīng)的字段內(nèi)容。

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

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: