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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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/10/09 PHP
php session 检测和注销
2009/03/16 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
Python subprocess模块学习总结
2014/03/13 Python
介绍Python中的文档测试模块
2015/04/28 Python
Python中的下划线详解
2015/06/24 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
python安装教程
2018/02/28 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python异常处理操作实例详解
2018/08/28 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
python中selenium库的基本使用详解
2020/07/31 Python
详解python tkinter 图片插入问题
2020/09/03 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
研究生简历自我评价范文
2014/09/13 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
丽江古城导游词
2015/02/03 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书