js实现iGoogleDivDrag模块拖动层拖动特效的方法


Posted in Javascript onMarch 04, 2015

本文实例讲述了js实现iGoogleDivDrag模块拖动层拖动特效的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js实现iGoogle Div Drag 模块拖动 层拖动效果</title>

<style type="text/css">

*{margin:0px; padding:0px;}

 body{position:relative; width:780px; height:800px; border:1px solid red}

.drag{width:200px; height:100px; border:1px solid #000;margin:20px; background:#fff}

.drag h1{margin:0px; padding:0px; font-size:12px; height:18px; line-height:18px; background:#E0E7F3; text-indent:20px;cursor:move;}

.center{ margin:200px; border:3px solid red}

</style>

<script type="text/javascript"></script>

</head>

<body>

 <div class="drag" >

 <h1><strong>www.baidu.com</strong></h1>

 </div>

 <div class="drag" >

 <h1>www.163.com</h1>

 </div>

 <div class="drag" >

 <h1><strong>3water.com</strong></h1>

 </div>

 <div class="drag"><h1>测试二</h1></div>

 <div class="drag"><h1>测试三</h1></div>

 <div class="drag"><h1>测试四</h1></div>

 <div class="drag"><h1>测试五</h1></div>

</body>

</html>

<script type="text/javascript">

/*

Author  : popper.w

Version : v2.0

*/

var DragZindexNumber=0;

function drag(obj){

var ox,oy,ex,xy,tag=0,mask=0;

if(tag==0){

obj.onmousedown=function(e)

 {   

  if(mask==1){return; }

  obj.style.zIndex=DragZindexNumber++;

     transp(obj,"start")

  tag=1;

  var e = e||window.event; 

  ex=getEventOffset(e).offsetX;

  ey=getEventOffset(e).offsetY;

  ox=parseInt(obj.offsetLeft);

  oy=parseInt(obj.offsetTop);

  tempDiv=document.createElement("div"); 

  with(tempDiv.style)

   {

   width=obj.offsetWidth+"px";

   height=obj.offsetHeight+"px";

   border="1px dotted red";

   position="absolute";

   left=obj.offsetLeft+"px";

   top=obj.offsetTop+"px";

   zIndex=999;

   }

  document.body.appendChild(tempDiv);

  this.ele=tempDiv;

  fDragStart(tempDiv);

  document.body.onmousemove=function(e){

  if(tag==1)

   { 

   var e=e||window.event;

   tempDiv.style.left=parseInt(e.clientX)-ex+"px";

   tempDiv.style.top=parseInt(e.clientY)-ey+"px";

   }

  else{if(!tempDiv==null)tempDiv.parentNode.removeChild(tempDiv)}

  }

    tempDiv.onmouseup=function(e)

  {

  var e=e||window.event;

  fDragEnd(tempDiv);

  obj.style.position="absolute";

  movie(obj,parseInt(e.clientX)-ex-19,parseInt(e.clientY)-ey-20);

  tempDiv.parentNode.removeChild(tempDiv);

  tag=0;

  }

  }

 }

}

function movie(o,l,t){

  var a=1;

  mask=1;

  var ol=parseInt(o.offsetLeft);

  var ot=parseInt(o.offsetTop);

  var iTimer=setInterval(function(){

   if(a==10)

    {

  transp(o,"end");

  mask=0;

  clearInterval(iTimer);

  }

   o.style.left=ol+a*(l-ol)/10+"px";

   o.style.top=ot+a*(t-ot)/10+"px";

   a++;

},20);

}

function fCancleBubble(e)

{

 var e = window.event || e;

 if (e.preventDefault) e.preventDefault();

 else e.returnValue = false;

}

function transp(o,mode){

           if(mode=="start"){

   if(document.all){

    o.style.filter = "Alpha(Opacity=50)";

   }else{

    o.style.opacity = 0.5;

   }

   }

    else {

      if(document.all){

    o.style.filter = "Alpha(Opacity=100)";

   }else{

    o.style.opacity = 1;

   }

    }

}

function getOffset(evt)

{

  var target = evt.target;

  if (target.offsetLeft == undefined)

  {

    target = target.parentNode;

  }

  var pageCoord = getPageCoord(target);

  var eventCoord =

  {

    x: window.pageXOffset + evt.clientX,

    y: window.pageYOffset + evt.clientY

  };

  var offset =

  {

    offsetX: eventCoord.x - pageCoord.x,

    offsetY: eventCoord.y - pageCoord.y

  };

  return offset;

}

function getPageCoord(element)

{

  var coord = {x: 0, y: 0};

  while (element)

  {

    coord.x += element.offsetLeft;

    coord.y += element.offsetTop;

    element = element.offsetParent;

  }

  return coord;

}

function getEventOffset(evt)

{

  var msg = "";

  if (evt.offsetX == undefined)

  {

    var evtOffsets = getOffset(evt);

 msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY};

  }

  else

  {

 msg={offsetX:evt.offsetX,offsetY:evt.offsetY};

  }

  return msg;

}

function fDragStart(XEle)

{

 switch(fCkBrs())

 {

   case 3:

    window.getSelection().removeAllRanges();

    break;

    

   default:

    XEle.setCapture();

    break;

 }

}

function fDragEnd(XEle)

{

 switch(fCkBrs())

 {

   case 3:

    window.getSelection().removeAllRanges();

    break;

    

   default:

    XEle.releaseCapture();

    break;

 }

}

function fCkBrs()

{

 switch (navigator.appName)

 {

  case 'Opera': return 2;

  case 'Netscape': return 3;

  default: return 1;

 }

} 

var element=document.getElementsByTagName("div");

for(var i=0;i<element.length;i++){

  if(element[i].className=="drag"){

  drag(element[i])}

  

}

</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript css styleFloat和cssFloat
Mar 15 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
JavaScript 闭包的使用场景
Sep 17 Javascript
JS实现4位随机验证码
Oct 19 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
JavaScript中的关联数组问题
Mar 04 #Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 #Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 #Javascript
JavaScript设置获取和设置属性的方法
Mar 04 #Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 #Javascript
深入探讨javascript中的数据类型
Mar 04 #Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 #Javascript
You might like
smarty简单入门实例
2014/11/28 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
编程输出如下图形
2013/11/24 面试题
自我鉴定怎么写
2013/12/05 职场文书
民生工程实施方案
2014/03/22 职场文书
户外活动总结范文
2014/04/30 职场文书
广告学专业求职信
2014/06/19 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js