日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 
  
  
  
  
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;  
 
 
 

 
 
 
 
  
  
  
  
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.= '   
  
  
  
  
      
  
  
  
.$zindex.'">   
  
  
  
  
        '.$row['id'].'.'.htmlspecialchars($row['content']).'   
  
  
  
  
    

注意，我在生成的每個(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。

然后再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";  
 
 
 

如此完成了拖動(dòng)并實(shí)時(shí)保存的效果。

原文鏈接：http://www.helloweba.com/view-blog-120.html

【編輯推薦】

1. jQuery拖動(dòng)布局實(shí)現(xiàn)排序結(jié)果同步數(shù)據(jù)庫(kù)
2. jQuery的.bind()、.live()和.delegate()之間區(qū)別
3. 分享7個(gè)用jQuery重寫(xiě)的經(jīng)典在線小游戲
4. 25個(gè)超棒的jQuery日歷和日期選取插件
5. 分享10個(gè)超炫的jQuery網(wǎng)站