- 喜悦原创 - 鼠标拖动层至任意位子并实时保存.... - 喜悦国际村

喜悦国际村 » 喜悦原创 » 鼠标拖动层至任意位子并实时保存....

上一主题

下一主题

deng0685
高级会员
Rank: 4

UID 84760
精华 0
积分 690
帖子 821
金钱 690 喜悦币
威望 0
人脉 0
阅读权限 50
注册 2006-12-13
状态离线

鼠标拖动层至任意位子并实时保存....

/*****************
author:青蛙是害虫
e-mail:229002767@qq.com
QQ:229002767
date:2007.6.20
******************/

在村里面泡了这么久，才发现自己原来除了灌水还真没发过什么帖子！！呵呵...
所以呢..这次正式的献上俺地处男  作.....
内容不是很多，不过确比较合适和我一样的菜鸟，高手就直接略过吧！！！....

实现的功能：鼠标拖动层至任意位子并实时保存....

所使用技术:  ajax  php  js

第一步: 我们把功能划分一下
既然是鼠标拖动层至任意位子并实时保存.....
那么  a.需要一段JS控制层可以实现拖动到任意位置
   b.获取该层在该点的实际X，Y，Z轴坐标
   c.将该层的X，Y，Z轴坐标更新.......
   d.用户新增留言记录
第一步分析完毕.....

第二步:功能的实现

a.需要一段JS控制层可以实现拖动到任意位置(这一段我不讲，因为这一段JS代码我也没仔细去看，不过知道如何调用就是了......)

b.获取该层在该点的实际X，Y，Z轴坐标
获取该层的实际坐标值，其实还是一段JS~~~~~
var b=document.getElementById(obj);       //获取ID为a的层并赋值给b
  var oRect=b.getBoundingClientRect();    //获取层的getBoundingClientRect的属性
  var x=oRect.left;                            //获取层当前的X轴坐标
  var y=oRect.top;
其实这个只是调用了该层的getBoundingClientRect()方法，也是很简单的一个东西~~
上面这一段JS代码就实现了获取层真实的 X，Y轴的坐标了
那还一个Z轴...Z轴的值我在网上找了好久，没找到！！！
不过之后我想到个办法...
在循环输出每一个层的时候就指定他的Z-INDEX的值，这个是值是用于表明层的覆盖关系的，所以我使用的是递增的办法去解决，查询出数据库中的数据再根据  Z-INDEX的值从小到大进行排列，那么循环的时候Z-INDEX的值也会一次增大，就能实现层的覆盖问题了
还有一个ajax的部分，就是.........被拖动的层一定是在顶层，那么他的Z轴坐标一定要为最大，所以我们可以设置一个隐藏的文本框max，文本框的值在默认的情况下会是数据库中Z轴字段中最大的值，当我们拖动一个层的时候他会把max的值+2赋给层连同X，Y轴坐标一起传给后台程序做更新处理..那当我们再次刷新页面的时候，嘿嘿...是不是我们的层的覆盖效果和我们拖动对象的时候是一样的呢！！！！

c.将该层的X，Y，Z轴坐标更新
这个说白了就是ajax的操作了，ajax如何操作在论坛里面已经写了好多了，我这就不重复去讲了.....当鼠标拖动层到停止的时候，触发一个事件，该时间要获取被拖动的层的X，Y轴坐标，还要获取max文本框的值，再将值传给后台更新程序处理...就OK了！！！！
/********************
这个check函数是获取对象的真实坐标的函数
这个函数其实是起着承上启下的作用
连接上面的鼠标拖动函数，又连接到下面的ajax函数
*********************/
function check(obj)
{
  var b=document.getElementById(obj);       //获取ID为a的对象并赋值给b
  var oRect=b.getBoundingClientRect();    //获取对象的getBoundingClientRect的属性
  var x=oRect.left;                            //获取对象当前的X轴坐标
  var y=oRect.top;                            //获取对象当前的Y轴坐标
  var count=document.getElementById('count').value; //获取数据库总共有多少条记录
  document.getElementById('count').value=parseInt(count)+2;    //为了判断下次拖动层的覆盖效果，count+2
  url="move.php?id="+obj+"&x="+x+"&y="+y+"&count="+count;
  dopage(obj,url);    //这个是将要调用ajax里面的函数
}

d.用户新增记录..哎，这个太easy了，就是最简单的表单传值再添加至数据库，我这就不做说明了

第三步:找BUG
我现在发现的bug(写出来娱乐的东东，没去修正....)
1.用户新增记录没有做判断，即使是全部为空的情况下也可以提交
2.用户在新增记录时候可以输入javascript脚本捣乱
3.似乎是网页编码的问题会导致无法发送ajax至后台程序(本来打算上传到一空间上让大家一起玩玩的，但是就出现了这个问题，暂时不知该如何解决)......

这个小东东只是我看的  互补古蓝  做出了这样的效果，感觉瞒好玩的，所以就也仿照了一个！！！呵呵.....

OK，分析就是这么多，数据库，代码和效果图片都在压缩包里面，如果还有什么不懂的话可以联系我，这段时间我天天在家~~呵呵！！！！！！

附件: 您所在的用户组无法下载或查看附件

2007-6-20 01:44 AM

leobok
中级会员
Rank: 3

中级会员

UID 63761
精华 0
积分 264
帖子 267
金钱 264 喜悦币
威望 0
人脉 0
阅读权限 30
注册 2005-3-27
来自非洲喀麦隆
状态离线

[推荐阅读] 妈呀。

这个东西应该很强悍

找工作中北京、广州、深圳、东莞

2007-6-20 08:52 AM

looking_for1
注册会员
Rank: 2

UID 78393
精华 0
积分 112
帖子 304
金钱 112 喜悦币
威望 0
人脉 0
阅读权限 20
注册 2006-8-15
来自 hubei
状态离线

[推荐阅读] php 按行读取文本并对比数据库，如何实现？

好早以前就想看看这个是怎么做的
今天终于看到了

爱我的人们，我一定会爱你们

2007-6-20 09:45 AM

deng0685
高级会员
Rank: 4

UID 84760
精华 0
积分 690
帖子 821
金钱 690 喜悦币
威望 0
人脉 0
阅读权限 50
注册 2006-12-13
状态离线

[推荐阅读] 这个米怎么样？

如果大家有什么不懂的可以直接问我！！！

2007-6-20 10:00 AM

klht (宇宙)
中级会员
Rank: 3

UID 77270
精华 0
积分 427
帖子 1082
金钱 426 喜悦币
威望 0
人脉 1
阅读权限 30
注册 2006-7-30
来自 UN星系
状态离线

[推荐阅读] 求匹配中文，但不包括中文标点的正则？

强, 顶一下.

什么时候才能找到梦寐以求的PHPER工作...

2007-6-20 10:26 AM

deng0685
高级会员
Rank: 4

UID 84760
精华 0
积分 690
帖子 821
金钱 690 喜悦币
威望 0
人脉 0
阅读权限 50
注册 2006-12-13
状态离线

[推荐阅读] 存储时间记录，是用datetime格式还是时间戳好？

大家一起进步！

2007-6-20 11:38 AM

83687 (MR.HU)
高级会员
Rank: 4

小乞丐

UID 80378
精华 0
积分 992
帖子 436
金钱 992 喜悦币
威望 0
人脉 0
阅读权限 50
注册 2006-9-21
状态离线

[推荐阅读] 问下面这个函数是干什么用的，请高手看看！谢谢！

热心的人啊！

此广告位招租!!!

2007-6-23 09:52 AM

sunceenjoy
中级会员
Rank: 3

初级会员

UID 68584
精华 0
积分 262
帖子 249
金钱 262 喜悦币
威望 0
人脉 0
阅读权限 30
注册 2006-2-13
状态离线

[推荐阅读] php插入mssql数据异常

不错，但是如果添加也是在本页面进行就更完美了。

2007-7-6 01:00 PM

sunceenjoy
中级会员
Rank: 3

初级会员

UID 68584
精华 0
积分 262
帖子 249
金钱 262 喜悦币
威望 0
人脉 0
阅读权限 30
注册 2006-2-13
状态离线

[推荐阅读] 如何按照一定规则过滤数组中的重复值

firefox下似乎有点小问题

2007-7-6 01:03 PM

wamper (wamper)
金牌会员
Rank: 6

资深会员

UID 23187
精华 0
积分 1014
帖子 1173
金钱 1014 喜悦币
威望 0
人脉 0
阅读权限 70
注册 2003-9-14
来自北京
状态在线

[推荐阅读] 截取字符串

把那个 obj.getBoundingClientRect换成我这个函数
function getBoundingClientRect(obj) {
var left = obj.offsetLeft;
var top = obj.offsetTop;
var offsetParent = obj.offsetParent;
if(offsetParent != document.body) {
var parentRect = getBoundingClientRect(offsetParent);
left += parentRect.left;
top += parentRect.top;
}
return {'left':left, 'top':top};
}

2007-7-6 02:24 PM

#10

可打印版本 | 推荐给朋友 | 订阅主题 | 收藏主题 | 开通个人空间

(冀ICP备05009913号)	管理员:sadly 邮箱/MSN: sadly@phpx.com QQ:824008(长隐)	清除 Cookies - - Archiver - WAP