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学习笔记(三)显示当时时间的代码
Apr 08 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
JS功能代码集锦
May 04 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
js编写简单的计时器功能
Jul 15 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
vue中watch的用法汇总
Dec 28 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
PHP语法速查表
2006/12/06 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
jquery自定义表格样式
2015/11/23 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
javascript学习之json入门
2016/12/22 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
Python操作Word批量生成文章的方法
2015/07/28 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
2014年安全生产大检查方案
2014/05/13 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
政工师工作总结2015
2015/05/26 职场文书
圆明园纪录片观后感
2015/06/03 职场文书