随机拖动层和实时保存拖动位置示例
本论文旨在更新左三参数,通过拖动后层的相对位置,相应的记录在数据表中的数据表上的特性,和页面解析每一层的不同位置,通过CSS。请看具体实施步骤。
准备MySQL数据表
首先,你需要准备一个表格笔记来记录图层的内容、背景颜色和坐标等。
如果不存在,创建表(注释)
` ID ` int(11)不为空auto_increment,
`内容` varchar(200)不为空,
`颜色`枚举('','蓝色',‘绿色')不为空default'yellow,
` XYZ ` varchar(100)默认为空,
主键(id)
= MyISAM引擎默认的字符集utf8);
然后几个记录插入表格,并注意XYZ字段表示一个组合的XYZ坐标的层,这就是X Y Z | | 。
drag.php
在drag.php,你需要在记录表中读取记录,这是在drag.php页面显示,代码如下:
include_once('connect。php); / /数据库链接。
美元=;
左=;
顶部=;
在美元=;
为查询= mysql_query(SELECT * FROM笔记订单ID号);
而($行= mysql_fetch_array($查询)){
列表($左顶部美元,在美元)=爆炸(| ',' } { $行'xyz);
美元=
<div class=注。$行{色彩}。style=左。为左。'px;顶部:美元的顶部。'px;Z指数:'
。在美元。>
。$行{ 'id' }。' '。htmlspecialchars($行{ 'content' })。
';
}
然后读笔记现在在学美元
请注意,我定义的位置在每一个div.note我已经产生,即设置左,前,和DIV的z-index值
CSS
。演示{位置:相对;身高:500px;保证金:20px;边界:1px点缀# d3d3d3 }
注:150px {宽度;高度:150px;位置:绝对的;边缘上:150px;填充:10px;
溢出:隐藏;光标:移动;字体大小:16px;线高度:22px;}
。注意跨度{保证金:2px }
。黄{背景颜色:# fdfb8c;边框1px solid # dedc65;}
蓝色{背景颜色:# a6e3fc;边框1px solid # 75c5e7;}
。绿色{背景颜色:# a5f88b;边框1px solid # 98e775;}
在你的风格,然后运行drag.php,你可以在页面中看到好几层,但你不能拖,因为添加jQuery。
jQuery
首先,你需要加载jQuery库和jQuery UI插件,以及global.js。
然后global.js添加代码:
$(函数(){())
VaR TMP;
$(注释)。每个(函数(){)
TMP = $(this)。Css('z-index);
如果(TMP >在zIndex = TMP);
})
make_draggable($('注意'));
});
VaR在= 0;
在global.js,首先,一个变量TMP在函数定义()。通过判断每个div.note z-index值,这是保证div在顶层(即Z指数是最大值)当它拖,它不会被其他层。
而在初始值设置为0。
接下来,我们写一个函数make_draggable(),调用jQuery UI插件处理拖动范围的更新操作的拖动方法,透明度和拖动停止。
功能make_draggable(元素){
elements.draggable({
不透明性:0.8,
遏制:'parent,
开始:功能(E,UI){ ui.helper.css('z-index ',+ +在);},
停止:函数(e,UI){
美元。得到('update_position。php,{
X:ui.position.left,
Y:ui.position.top,
Z:在,
ID:parseInt(ui.helper.find('span。数据)。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);
如果(!is_numeric($ _get { 'id' })| |!is_numeric($ _get { x })is_numeric($ _get { Y })| | | |!
is_numeric($ _get { Z }))
模具(0 );
ID = intval美元(美元_get { 'id' });
X元= intval($ _get { x });
Y = intval美元(美元_get { Y });
Z = intval美元(美元_get { Z });
mysql_query(更新设置XYZ =。美元。| ,| Y美元。$ Z.id是美元。ID);
1;
以上是关于如何实现随机拖动层,并立即保存拖动位置,希望能对大家有所帮助。