| /***************** 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至后台程序(本来打算上传到一空间上让大家一起玩玩的，但是就出现了这个问题，暂时不知该如何解决)...... |