关闭

鼠标拖动层, W3C标准,兼容IE6 & Firefox

2054人阅读 评论(2) 收藏 举报

经历了好一段的调试,终于调出了兼容IE、Firefox的鼠标拖动层。源码附上。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Binny.cn</title>
<script>
 
var obj=0;
 
var x=0;
 
var y=0;
 
var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE
 var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox
 function find(evt,objDiv){
  obj 
= objDiv
  
if (ff){
    x 
= document.documentElement.scrollLeft + evt.layerX;
    y 
= document.documentElement.scrollTop + evt.layerY;
    
    
if (document.documentElement.scrollTop > 0){
     y 
= evt.layerY - document.documentElement.scrollTop;
    }

    
    
if (document.documentElement.scrollLeft > 0){
     x 
= evt.layerX - document.documentElement.scrollLeft;
    }

   }

  
if (ie){
    x 
= document.documentElement.scrollLeft + evt.offsetX;
    y 
= document.documentElement.scrollTop + evt.offsetY;
    
    
if (document.documentElement.scrollTop > 0){
     y 
= evt.offsetY - document.documentElement.scrollTop;
    }

    
    
if (document.documentElement.scrollLeft > 0){
     x 
= evt.offsetX - document.documentElement.scrollLeft;
    }

   }

 }

 
function dragit(evt){
  
if(obj == 0){
   
return false
  }

  
else{
   obj.style.left 
= evt.clientX - x + "px";
   obj.style.top 
= evt.clientY - y + "px";
  }

 }

</script>
</head>
<body style="margin:0" onmousemove="dragit(event)" onmouseup="obj = 0">

<div id="aaa" style="background-color:red;width:200pt;height:200pt;position:absolute">
<div id="aa" style="width:200pt;height:20pt;background:blue;position:absolute" onmousedown="find(event,document.getElementById('aaa'))"></div>
</div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>

 

以下,是关于制作鼠标拖动层的详解:

解决思路 
    这个效果并不算常见,通常用于游戏或个人站点中。因为拖曳是靠鼠标来操作的,所以对鼠标的位置的捕获是问题的重点,然后才是根据鼠标的位置设置层的位置。 


具体步骤: 
1.在对象(层)上按下鼠标时,先捕获到需要拖曳的对象,然后获取或设置该对象的相关属性。 

obj=event.srcElement 
obj.setCapture() 
z=obj.style.zIndex 
obj.style.zIndex=100 
x=event.offsetX 
y=event.offsetY 
down=true 

2.开始拖曳时,捕获鼠标当前位置,并根据该数值设置被拖曳对象的位置。 

obj.style.posLeft=document.body.scrollLeft+event.x-x 
obj.style.posTop=document.body.scrollTop+event.y-y 

3.拖曳完松开鼠标后,重设标志 down ,还原对象的 z-index并释放对它的鼠标捕捉。 

down=false  
obj.style.zIndex=z  
obj.releaseCapture() 

4.完整代码。 

<script> 
var x,y,z,down=false,obj    
function init(){ 
obj=event.srcElement     //事件触发对象 
obj.setCapture()            //设置属于当前对象的鼠标捕捉 
z=obj.style.zIndex          //获取对象的z轴坐标值 
//设置对象的z轴坐标值为100,确保当前层显示在最前面 
obj.style.zIndex=100 
x=event.offsetX   //获取鼠标指针位置相对于触发事件的对象的X坐标 
y=event.offsetY   //获取鼠标指针位置相对于触发事件的对象的Y坐标 
down=true         //布尔值,判断鼠标是否已按下,true为按下,false为未按下 


function moveit(){ 
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上 
 if(down&&event.srcElement==obj){ 
   with(obj.style){ 
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/ 

        posLeft=document.body.scrollLeft+event.x-x 
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/ 
        posTop=document.body.scrollTop+event.y-y 
   } 
 } 


function stopdrag(){ 
//onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false 
down=false  
obj.style.zIndex=z       //还原对象的Z轴坐标值 
obj.releaseCapture() //释放当前对象的鼠标捕捉 

</script> 

<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:20;top:190;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">Layer 1</div> 
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2</div> 
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:100;top:90;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3</div> 

注意:只有 CSS 的 position 属性值为 absolute 的对象才能进行拖动操作。 
提示:如果需要将拖曳组件化,可以参考第二部分HTC一节。 
技巧:可以在 init() 函数中加一句 event.cancelBubble=true ,以取消在该对象上的事件冒泡。 
试一试:读者可以试着实现移动其他对象,例如移动一个图片或文本框。 
特别提示 
在拖曳对象前必须确保该对象的为绝对定位的,把上面的完整代码保存就可以看到效果了,在实际就用时务必在对象上加上 onmousedown、onmousemove和onmouseup三个事件并触发相应函数。代码运行效果如图 3.8 所示。 

图 3.8 可拖动的层 


特别说明

本例需要掌握的技巧比较多,捕捉鼠标,获取鼠标位置(相当于对象),释放鼠标捕捉,文档的滚动距离还有with 语句。 
1.       setCapture() 设置属于当前文档的对象的鼠标捕捉。 
2.       event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 
3.       event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
4.       releaseCapture() 释放当前文档中对象的鼠标捕捉。 
5.       scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 
6.       scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 
7.       with 为一个或多个语句设定默认对象。
 

0
0
查看评论

如何让您的网站符合W3C标准

转自:http://一杯白开水w.iteye.com/blog/1122618 什么是W3C标准      作为网站技术开发人员而言,往往是站在自己的开发角度来实施网站布署(读取数据及开发的方便性等等),而不是站在网站访问者与搜索引擎角度。因此大部分的...
  • csdn_newman
  • csdn_newman
  • 2016-08-25 21:58
  • 816

W3C标准、Web语义化、浏览器差异和兼容性

此篇内容是招聘常见的需要应聘者所知道的三方面①:W3C标准分为: 1.结构标准->: xml(可扩展标记语言)、html/xhtml(超文本标记语言) 2.表现标准->: 层叠样式表 css 3.行为标准->:DOM(文档对象模型)、ECMAScript ②:Web...
  • RowanIT3
  • RowanIT3
  • 2016-02-18 11:39
  • 850

推荐一款可以鼠标拖动网页的firefox插件

作为一名初级程序员,往往需要阅读大量的网上资料、文章什么的。阅读的时候,用的最多的一般就是鼠标滚轮了,鼠标滚轮很好用。但有的时候一不小心就滚过了。我平时也爱看一些电子书,就想有没有类似用鼠标拖动电子书那样的工具可以拖动网页。 最终让我给找到了。就是这款firefox插件。可以使用快捷键随时开关,在阅...
  • ffl594276991
  • ffl594276991
  • 2016-05-08 11:02
  • 1470

W3C盒模型和IE盒模型的区别

盒模型在初学css的时候就会接触到,其实很容易理解,这里也不多废话,但是实际上在布局的时候还是会出现很多问题。对于盒模型的认识不能只停留在知道一个盒模型由哪些部分构成,也要更多的了解如何在不同情况下利用盒模型的特点进行布局。 这里讨论一下两种不同的盒模型: W3C盒模型和IE盒模型。 其实IE的...
  • u011366705
  • u011366705
  • 2015-06-29 10:42
  • 7627

【jQueryUI】兼容IE6的前端框架jQueryUI的Helloworld,对话面板,修改其所有组件的字体大小

jQueryUI与ExtJs是非常出名的UI,这两个UI还有更大的一个好处就是兼容IE6。虽然jQueryUI一直被人说丑,但是,一直是最受欢迎的前端框架之一。 虽然一个网站全部都用jQueryUI布局很少,但是或多或少会用到里面一些实用的组件的。 jQueryUI的下载,先到其官网http:/...
  • yongh701
  • yongh701
  • 2015-09-24 20:22
  • 4312

标准盒子模型和IE盒子模型

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、con...
  • zyuzixiao
  • zyuzixiao
  • 2014-01-24 14:48
  • 26247

IE6IE7Firefox浏览器不兼容原因及解决办法

IE6IE7Firefox浏览器不兼容原因及解决办法     一、IE6IE7Firefox浏览器不兼容原因及解决办法 1.文字 本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实...
  • yuwq123
  • yuwq123
  • 2016-08-13 11:57
  • 1156

ecshop版本模板的放大镜,兼容ie6+ie7+ie8+ff

兼容 ie6+ie7+ie8+ff 我来说下 具体的操作步骤 【1】.先下载 mzp.packed.js 下载地址:http://www.magictoolbox.com/static/magiczoomplus-demo.zip 【2】.在模板中引入 mzp.packed.js 文件 有...
  • ximo
  • ximo
  • 2012-08-11 22:20
  • 1171

鼠标拖动DIV

  按这里移动 var Obj=document.onmouseup=MUpdocument.onmousemove=MMovefunction MDown(Object){Obj=Object.iddocument.all(Obj).setCapture()pX=ev...
  • zhanghongqiao
  • zhanghongqiao
  • 2008-01-25 17:42
  • 675

HTML CSS的兼容性问题、IE6BUG之浮动与定位篇

IE6下内容撑开设置宽高———————————————————-在IE6下,内容会撑开设置好的宽高 例如,给固定宽度的wrap_div下放left_div、right_div两个div并浮动, wrap_div的宽度正好放下两个内部div(两个内部div也设置了宽度)。在IE6下,如果left...
  • u014420383
  • u014420383
  • 2015-08-08 16:45
  • 1232
    个人资料
    • 访问:12019947次
    • 积分:66939
    • 等级:
    • 排名:第38名
    • 原创:675篇
    • 转载:2297篇
    • 译文:0篇
    • 评论:558条
    文章分类
    文章存档
    最新评论
    计算流量