仓酷云

标题: PHP网页编程之PHP+MySQL+jQuery完成拖动并保留拖动层... [打印本页]

作者: 乐观 时间: 2015-2-3 23:33
标题: PHP网页编程之PHP+MySQL+jQuery完成拖动并保留拖动层...
即使你理解不了PHP，但是也必须先跟它混个脸熟，看，一遍遍的看，看的同时一边琢磨，一边按照它所教的打代码，即使你搞不清楚那些代码到底是干嘛的，但是起码你应该找找感觉。　　想拖动页面上的层，完整可以用jQuery ui的Draggable办法来完成，那若何将拖动后层的地位保留上去呢?本文将给出谜底。本文解说了若何采取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=utf

  　　然后向表中拔出几笔记录，注重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";
应该大致熟悉了一些学习过程，也许我的过程和你的有些出路，但是不管怎么样是殊途同归，我写这么多，也只是给大家一个借鉴的机会，至于好与不好，默默不敢打包票^0^

作者: 金色的骷髅 时间: 2015-2-4 02:06
遇到出错的时候，我经常把错误信息直接复制到 google的搜索栏，一般情况都是能搜到结果的，不过有时候会搜出来一大片英文的出来，这时候就得过滤一下，吧中文的弄出来，挨着式方法。

作者: 只想知道 时间: 2015-2-4 21:32
你很难利用原理去编写自己的代码。对于php来说，系统的学习我认为还是很重要的，当你有一定理解后，你可你针对某种效果研究，我想那时你不会只是复制代码的水平了。

作者: 小女巫 时间: 2015-2-8 07:46
我要在声明一下：我是个菜鸟！！我对php这门优秀的语言也是知之甚少。但是我要在这里说一下php在网站开发中最常用的几个功能：

作者: 第二个灵魂 时间: 2015-2-25 00:59
这些都是最基本最常用功能，我们这些菜鸟在系统学习后，可以先对这些功能深入研究。

作者: 灵魂腐蚀 时间: 2015-3-2 01:42
实践是检验自己会不会的真理。

作者: 小妖女 时间: 2015-3-8 21:52
使用zendstdio 写代码的的时候，把tab 的缩进设置成4个空格是很有必要的

作者: 乐观 时间: 2015-3-10 05:16
如果你已经到这种程度了，那么你已经可以做我的老师了。其实php也分很多的区域，

作者: 蒙在股里 时间: 2015-3-11 10:29
真正的方向了，如果将来要去开发团队，你一定要学好smarty ,phplib这样的模板引擎，

作者: 深爱那片海 时间: 2015-3-11 14:40
php是动态网站开发的优秀语言，在学习的时候万万不能冒进。在系统的学习前，我认为不应该只是追求实现某种效果，因为即使你复制他人的代码调试成功，实现了你所期望的效果，你也不了解其中的原理。

作者: 愤怒的大鸟 时间: 2015-3-18 19:40
有位前辈曾经跟我说过，phper 至少要掌握200个函数编起程序来才能顺畅点，那些不熟悉的函数记不住也要一拿手册就能找到。所以建议新手们没事就看看php的手册（至少array函数和string函数是要记牢的）。

作者: 飘灵儿 时间: 2015-3-20 20:44
对于懒惰的朋友，我推荐php的集成环境xampp或者是wamp。这两个软件安装方便，使用简单。但是我还是强烈建议自己动手搭建开发环境。

作者: 精灵巫婆 时间: 2015-3-21 00:25
真正的方向了，如果将来要去开发团队，你一定要学好smarty ,phplib这样的模板引擎，

作者: 分手快乐 时间: 2015-4-2 03:20
你很难利用原理去编写自己的代码。对于php来说，系统的学习我认为还是很重要的，当你有一定理解后，你可你针对某种效果研究，我想那时你不会只是复制代码的水平了。

作者: 仓酷云 时间: 2015-4-2 06:21
没接触过框架的人，也不用害怕，其实框架就是一种命名规范及插件，学会一个框架其余的框架都很好上手的。

作者: 小魔女 时间: 2015-4-10 09:20
对于懒惰的朋友，我推荐php的集成环境xampp或者是wamp。这两个软件安装方便，使用简单。但是我还是强烈建议自己动手搭建开发环境。

作者: 变相怪杰 时间: 2015-4-15 00:12
首先声明：我是一个菜鸟，是一个初学者。学习了一段php后总是感觉自己没有提高，无奈。经过反思我认为我学习过程中存在很多问题，我改变了学习方法后自我感觉有了明显的进步。

作者: 再现理想 时间: 2015-4-16 11:09
刚开始安装php的时候，我图了个省事，把php的扩展全都打开啦（就是把php.ini 那一片 extension 前面的冒号全去掉啦），这样自然有好处，以后不用再需要什么功能再来打开。

作者: 活着的死人 时间: 2015-4-23 01:54
不禁又想起那些说php是草根语言的人，为什么认得差距这么大呢。

作者: 山那边是海 时间: 2015-4-26 07:19
有位前辈曾经跟我说过，phper 至少要掌握200个函数编起程序来才能顺畅点，那些不熟悉的函数记不住也要一拿手册就能找到。所以建议新手们没事就看看php的手册（至少array函数和string函数是要记牢的）。

作者: 若天明 时间: 2015-5-1 05:09
装在C盘下面可以利用windows的ghost功能可以还原回来（顺便当做是重转啦），当然啦我的编译目录要放在别的盘下，不然自己的劳动成果就悲剧啦。

欢迎光临仓酷云 (http://ckuyun.com/)