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 实现脚注(Footnote)效果
Sep 09 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
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
PHP中cookies使用指南
2007/03/16 PHP
帝国cms目录结构分享
2015/07/06 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Python 文件重命名工具代码
2009/07/26 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python调用C/C++的方法解析
2020/08/05 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
物业管理求职自荐信
2013/09/25 职场文书
执行总经理岗位职责
2014/02/03 职场文书
超市国庆节促销方案
2014/02/20 职场文书
门前三包责任书
2014/04/15 职场文书
运动会开幕词
2015/01/28 职场文书
求职自荐信怎么写
2015/03/04 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
七年级作文之雪景
2019/11/18 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
vue实现滑动解锁功能
2022/03/03 Vue.js
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL