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 日期对象Date扩展方法
May 30 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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
2006/12/23 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
Javascript 实用小技巧
2010/04/07 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
jquery延迟对象解析
2016/10/26 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
35个Python编程小技巧
2014/04/01 Python
python实现跨文件全局变量的方法
2014/07/07 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python3中的md5加密实例
2018/05/29 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
python tkinter组件摆放方式详解
2019/09/16 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Python函数调用追踪实现代码
2020/11/27 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
捷科时代的软件测试笔试题
2015/11/09 面试题
大四自我鉴定范文
2013/10/06 职场文书
企业年会主持词
2014/03/27 职场文书
公司年底活动方案
2014/08/17 职场文书
房屋出租委托书格式
2014/09/23 职场文书
python数据处理之Pandas类型转换
2022/04/28 Python