JavaScript实现AJAX的拖动效果

JavaScript实现AJAX的拖动效果
2011年07月23日
　　
　　
　　
　　
　　drag layer
　　
　　body,table{color:#000000;
　　font-size:12px;
　　}
　　div.div_one{}
　　.dragBar{color:#FFFFFF;
　　font-weight:bold}
　　
　　
　　/*written by joelee@51js
　　*/
　　var tmpElement=null;
　　var dragElement=null;
　　var downX,downY,tmp_o_x,tmp_o_y;
　　var refElement=null;
　　var dragActive=0;
　　var draging=0;
　　function readyDrag(){
　　dragActive=1;
　　if(event.srcElement.tagName!="DIV")
　　return;
　　dragElement=event.srcElement.parentNode;
　　tmpElement=dragElement.cloneNode(true);
　　tmpElement.style.filter="alpha(opacity=90)";
　　tmpElement.style.zIndex=2;
　　dragElement.style.zIndex=1;
　　tmpElement.style.position="absolute";
　　if(dragElement.parentNode.tagName!="BODY"){
　　dragElement.style.left=dragElement.offsetLeft dragElement.parentNode.style.pixelLeft;
　　dragElement.style.top=dragElement.offsetTop dragElement.parentNode.style.pixelTop;
　　}
　　downX=event.clientX;
　　downY=event.clientY;
　　tmp_o_x=dragElement.style.pixelLeft;
　　tmp_o_y=dragElement.style.pixelTop;
　　tmpElement.style.visibility="hidden";
　　document.body.appendChild(tmpElement);
　　document.οnmοusemοve=startDrag;
　　}
　　document.οnmοuseup=endDrag;
　　function startDrag(){
　　if(dragActive==1&&event.button==1&&dragElement!=null&&tmpElement!=null){
　　tmpElement.style.visibility="visible";
　　tmpElement.style.left=tmp_o_x event.clientX-downX;
　　tmpElement.style.top=tmp_o_y event.clientY-downY;
　　dragElement.style.backgroundColor="#CCCCCC";
　　document.body.style.cursor="move";
　　draging=1;
　　}
　　}
　　function endDrag(){
　　if(dragActive==1&&tmpElement!=null){
　　if(draging==1){
　　dragElement.removeNode(true);
　　draging=0;
　　}
　　tmpElement.style.filter="alpha(opacity=100)";
　　tmpElement.style.zIndex=1;
　　document.body.style.cursor="default";
　　if(refElement!=null&&refElement.parentNode!=null&&refElement.parentNode.tagName!="BODY"){
　　tmpElement.style.width=refElement.parentNode.style.width;
　　tmpElement.style.position="";
　　refElement.parentNode.insertBefore(tmpElement,refElement);
　　}
　　}
　　dragElement=null;
　　tmpElement=null;
　　dragActive=0;
　　}
　　function readyInsert(){
　　if(dragActive==1){
　　var element=event.srcElement;
　　if(element==dragElement)return;
　　if(element.tagName!="DIV")
　　return;
　　if(element.className=="dragBar"||element.className=="textSheet"||element.className=="blankBar")
　　element=element.parentNode;
　　element.style.backgroundColor="#CCCCCC";
　　element.style.filter="alpha(opacity=50)";
　　refElement=element;
　　}
　　}
　　function failInsert(){
　　var element=event.srcElement;
　　if(element.tagName!="DIV")
　　return;
　　try{
　　if(element.className=="dragBar"||element.className=="textSheet"||element.className=="blankBar")
　　element=element.parentNode;
　　}catch(e){}
　　element.style.filter="alpha(opacity=100)";
　　element.style.backgroundColor="#FFFFFF";
　　refElement=null;
　　}
　　document.onselectstart=function(){return false}
　　
　　
　　
　　
　　Window
　　Content
　　Content
　　Content
　　Content
　　
　　
　　
　　把层拖动到这儿
　　
　　
　　把层拖动到这儿
　　
　　
　　BBS
　　Content
　　
　　
　　
　　Log
　　Content
　　Content
　　Content
　　Content
　　
　　
　　
　　
　　Worker
　　Content
　　
　　
　　
　　Tools
　　Content
　　
　　
　　
　　
　　
　　
　　http://www.west263.com
　　以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
　　
　　
　　
　　上一页12 3 下一页
　　
　　
　　[打印]
　　[关闭]
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　0
　　顶一下
　　
　　相关文章
　　
　　使用Javascript制作行间颜色间隔网页屏蔽(左右键,代码等)的非JS自动最大化窗口的Javascript代码跟随滚动条漂浮的JS特效内外网同时访问问题：用JS判断访网页之定时器详解web打印时隐藏按钮及其他信息的网页表单的javascript集成验证方用JS脚本修改用户注册表2用javascript改变和控制显示的图
　　
　　
　　
　　
　　上一篇：最常用的10个javascript自定义函数
　　
　　下一篇：JS的package/import机制的考察提纲
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　热点关注
　　
　　
　　JS经典源码:通用javascripJS实现身份证号码15位转18网页两侧浮动广告代码JS实现无刷新联动菜单（seJavaScript判断Form中的Rajavascript中取得下拉框的用javascript响应表单的提自定义右键菜单代码详解Javascript所有对象的属性汇总：一些不错的使用频率轮换广告代码加演示[JavaSFireFox 如何用Javascript（Javascript）prototype实用代码分析：JavaScript网页页面中如何用Javascri用Javascript实现表格单元用JavaScript实现上下文字在JS文件中调用JS文件，可JavaScript页面刷新与弹出JavaScript : WINDOW FOR javascript 常用代码大全JavaScript中this关键字使用DHTML中的Popup ObjectJavascript模拟的DOS窗口用Javascript网页代码直接网页设计或制作中与键盘相javascript表单之间的数据如何用Javascript获得Textjavascript xml实现二级下类似于Outlook的导航菜单一个网页上随鼠标移动显示把中文字符转换成Utf8编码网页制作技术之Javascript禁止用右键查看源代码单击图片时直接出现另存为
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　IDC资讯
　　虚拟主机
　　域名注册
　　托管租用
　　vps主机
　　智能建站
　　
　　网站运营
　　建站经验
　　策划盈利
　　搜索优化
　　网站推广
　　免费资源
　　
　　网站联盟
　　联盟新闻
　　联盟介绍
　　联盟点评
　　网赚技巧
　　
　　行业资讯
　　业界动态
　　搜索引擎
　　网络游戏
　　门户动态
　　电子商务
　　广告传媒
　　
　　网络编程
　　Asp.Net编程
　　Asp编程
　　Php编程
　　Xml编程
　　Access
　　Mssql
　　Mysql
　　其它
　　
　　服务器技术
　　Web服务器
　　Ftp服务器
　　Mail服务器
　　Dns服务器
　　安全防护
　　
　　软件技巧
　　其它软件
　　Word
　　Excel
　　Powerpoint
　　Ghost
　　Vista
　　QQ空间
　　QQ
　　FlashGet
　　迅雷
　　Internet Explorer
　　
　　网页制作
　　FrontPages
　　Dreamweaver
　　Javascript
　　css
　　photoshop
　　fireworks
　　Flash
　　
　　程序设计
　　Java技术
　　C/C++
　　VB/index.html">VB
　　delphi
　　
　　网络知识
　　网络协议
　　网络安全
　　网络管理
　　组网方案
　　Cisco技术
　　
　　操作系统
　　Win2000
　　WinXP
　　Win2003
　　Mac OS
　　Linux
　　FreeBSD
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　返回首页 |关于我们
　　| 联系我们 | 付款方式
　　| 创业联盟 | 价格总览
　　| 资讯中心 | 友情链接
　　| 网站地图 | 招贤纳士 |
　　
　　
　　
　　
　　
版权所有 西部数码(
　　
　　
　　
　　
　　 财务咨询：总机转224
　　223 传真：028-86264041 财务QQ：635483282

　　售前咨询QQ：327314358 241975952 275026793 408235859 2182518 499513144
售后服务QQ：634349278 809071471 307742704 512359778 287976517 363783715

　　《中华人民共和国增值电信业务经营许可证》编号：川B2-20030065号