php拖文件夹里,PHP+jQuery实现随意拖动层并即时保存拖动位置

搜索热词

@H_403_0@想拖动页面上的层，完全可以用jQuery ui的Draggable方法来实现，那如何将拖动后层的位置保存下来呢？本文将给出答案。本文讲解了如何采用PHP+MysqL+jQuery，实现随意拖动层并即时保存拖动位置。

@H_403_0@之前我有文章：，文中以项目为示例，讲解了实现拖动布局的方法。本文与之不同之处在于可以任意拖动页面位置，原理就是通过拖动将拖动后层的相对位置left,top和z-index三个参数更新到数据表中对应的记录，页面通过CSS解析每个层不同的位置。请看具体实现步骤。

@H_403_0@准备MysqL数据表

@H_403_0@首先需要准备一张表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;

@H_403_0@然后向表中插入几条记录，注意xyz字段表示的是层的xyz坐标的组合，格式为"x|y|z"。

@H_403_0@drag.PHP

@H_403_0@在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.= '

'.$row['id'].'.'.htmlspecialchars($row['content']).'

';

}

@H_403_0@然后将读取出来的$notes现在在div中。

@H_403_0@注意，我在生成的每个DIV.note中定义了位置，即设置该div的left,top和z-index值。

@H_403_0@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;}

@H_403_0@有了样式之后，然后运行drag.PHP，这时就可以看到页面中排列的的几个层，但是还不能拖动，因为还要加入jQuery。

@H_403_0@jQuery

@H_403_0@首先需要载入jquery库和jquery-ui插件以及global.js。

@H_403_0@

然后再global.js加入代码：

$(function(){

var tmp;

$('.note').each(function(){

tmp = $(this).css('z-index');

if(tmp>zIndex) zIndex = tmp;

})

make_draggable($('.note'));

});

var zIndex = 0;

@H_403_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())

});

}

});

}

@H_403_0@当拖动时，将当前层的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";

@H_403_0@以上所述就是本文的全部内容了，希望大家能够喜欢。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。