之前我有文章：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
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索php
， function
， 位置
， z-index
， 数据表
， notes
， 拖动层
， 随意拖动
， js实现div拖动效果
， js实现div拖动
， jQuery-ui
， div随意拖动
， jquery拖动布局
保存拖动位置。
jquery实现div拖动、jquery实现拖动、win7文件夹随意拖动、win10文件夹随意拖动、word图片随意拖动，以便于您获取更多的相关知识。