newton21012915
- 浏览: 60387 次
- 性别:
- 来自: 长春
-
最新评论
<!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" lang="gb2312">
<head>
<title> 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content="代码实例：拖动对象">
<meta name="description" content="最简短的拖动对象代码实例演示">
<style>
.dragAble {position:relative;cursor:move;}
</style>
<script language="javascript">
<!--
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="dragAble") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function("isdrag=false");
//-->
</script>
</head>
<body>
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" / onclick="javascript:window.open(this.src);" style="cursor: pointer" alt="点此在新窗口浏览图片" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)">
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" / onclick="javascript:window.open(this.src);" style="cursor: pointer" alt="点此在新窗口浏览图片" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)">
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" / onclick="javascript:window.open(this.src);" style="cursor: pointer" alt="点此在新窗口浏览图片" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)"><br /><br />
<div style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class="dragAble">这些都是可拖动对象</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title> 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content="代码实例：拖动对象">
<meta name="description" content="最简短的拖动对象代码实例演示">
<style>
.dragAble {position:relative;cursor:move;}
</style>
<script language="javascript">
<!--
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="dragAble") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function("isdrag=false");
//-->
</script>
</head>
<body>
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" / onclick="javascript:window.open(this.src);" style="cursor: pointer" alt="点此在新窗口浏览图片" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)">
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" / onclick="javascript:window.open(this.src);" style="cursor: pointer" alt="点此在新窗口浏览图片" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)">
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" / onclick="javascript:window.open(this.src);" style="cursor: pointer" alt="点此在新窗口浏览图片" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)"><br /><br />
<div style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class="dragAble">这些都是可拖动对象</div>
</body>
</html>
分享到：
发表评论
文章已被作者锁定，不允许评论。
-
JAVA解惑
2010-06-03 10:22 757准备读一遍，很多细节平时被忽略了。留个记号 -
js调用outlook
2010-01-14 22:15 1753window.open("mailto:liu@gm ... -
dwr
2009-04-13 17:00 776现在我们看看dwr在页面上怎样跟服务器交互，dwr为我们提供了 ... -
Tab.addListener
2009-03-30 16:37 878SearchTab.addListener('activeTa ... -
地址栏icon图标替换
2009-03-17 13:12 2746地址栏icon图标替换 方法1：制作一个ico图标，然后 ... -
openjpa 实现新增列设置默认值
2009-03-10 13:22 885@Column(name = "col_tier ... -
div图片居中
2009-03-05 14:09 3249很多人都知道，无论是图片还是文字，在div里面水平居中是很容易 ... -
div中文字居中
2009-03-05 13:35 797加上line-height，作用于一行的vertical-al ... -
java还原mysql
2009-03-04 00:42 1176public boolean restore(Backu ... -
xml转对象
2009-03-03 13:08 2080import java.io.ByteArrayInput ... -
java读注册表 备份mysql
2009-03-03 12:57 1314mport java.io.BufferedOutputS ... -
获取各种浏览器可见窗口大小
2009-02-28 23:35 870关于获取各种浏览器可见窗口大小的一点点研究 <scr ... -
使用Apache的CLI处理命令行
2009-01-15 22:47 1675需要commons-cli-1.0.jar。 使用 Optio ... -
quartz中cronExpression配置
2009-01-15 00:16 1895字段 允许值 ... -
spring+quartz例子
2009-01-12 23:46 1056测试类 import org.springframewor ... -
使用GridBagLayout布局
2009-01-12 22:31 1297GridBagLayout布局可以随窗口大小调整位置。 imp ... -
String 和 Date ，Long 之间相互转换
2008-12-28 22:35 3066public static void main(String[ ... -
dwr异常处理问题
2008-12-18 00:32 1009dwr中抛出异常 Exception，但在javascript ... -
javascript 键码值
2008-12-12 22:54 982字母和数字键的键码值(keyCode) 按键 键码 按键 键码 ... -
javascript 实现超过32位数与运算
2008-12-11 11:54 1116<script type="text/java ...
相关推荐
### js放大缩小拖拽图片（兼容IE、火狐） #### 概述 本文将详细介绍一个JavaScript脚本，该脚本可以实现图片的放大、缩小以及拖拽功能，并且能够兼容Internet Explorer (IE) 和 Firefox 浏览器。通过这个脚本，...
通过这种方式，我们可以创建一个兼容IE和Firefox的拖动事件模型。这个模型不仅适用于拖动，还可以扩展到其他需要跨浏览器事件处理的场景。记住，兼容性是Web开发中的重要课题，理解和掌握各种浏览器的差异对于构建...
在web中模拟窗口表格控件，可以用鼠标拖动改变表格列宽,兼容Firefox 3.5和IE6浏览器。
标题中的"IETab"是一个Firefox浏览器插件，它允许用户在Firefox中直接使用Internet Explorer（IE）的渲染引擎来打开网页。这个插件对于那些必须访问仅支持IE特性的网站的用户来说非常有用，因为某些老旧或特定的Web...
在任兼容ie6~ie9 firefox 谷歌”指的是一个基于jQuery实现的弹出对话框插件，它具有拖动功能，并且兼容Internet Explorer 6到9，以及Firefox和Google Chrome等现代浏览器。这个插件可能采用了jQuery的核心功能，如...
本文将详细讲解如何实现一个兼容IE和Firefox的拖动div效果。 首先，我们需要了解两种浏览器对拖放事件的支持情况。Internet Explorer（IE）从版本5.5开始支持DOM级别的拖放，而Firefox则从版本3.5开始支持W3C标准的...
可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox].zip 可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox].zip 可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox].zip
完全兼容ie与firefox的拖动层! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
"可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]"这个标题所描述的是一种增强用户界面的技术，它允许用户通过鼠标直接拖动来改变表格中单元格的宽度，从而更好地适应显示需求。这种功能在数据展示和分析...
网页特效-窗口特效-兼容IE和Firefox的可拖动弹出登陆窗口
在写兼容IE和Firefox的拖动窗口代码时，需要特别注意这一点。 为了统一处理不同浏览器的行为，可以通过编写JavaScript代码来检测浏览器类型。如果浏览器支持document.all语法，则认为是IE浏览器，否则为Firefox。...
总的来说，实现"可拖动div层，兼容IE火狐等浏览器"涉及到HTML、CSS和JavaScript的综合应用，尤其是jQuery的使用，可以高效地创建出用户友好的交互体验。通过学习和理解这些文件，你可以掌握如何在自己的项目中创建...
o.p_p_c_gw=function(index)/*取得o.parentNode.parentNode.cells的宽度，兼容IE6和Firefox*/{ if(window.ActiveXObject){ return o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth; }...
这个"通用可拖动层示例兼容火狐，IE"就是一个针对不同浏览器，尤其是火狐（Firefox）和IE（Internet Explorer）实现的可拖动层解决方案。 首先，我们来看"可移动层示例.html"，这是一个HTML文件，其中包含了用于...
点击链接可以弹出一个拖拽的层,IE,火狐都可以兼容。
runcode div#test{border:solid 1px blue;background:red;position:absolute;left:100px;top:200px;... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]javascript支持firefox,ie7页面布局拖拽效果代码
该示例通过结合JavaScript与CSS实现了这一功能，并确保了其在不同浏览器（包括Internet Explorer 和 Firefox）中的兼容性。 ### 2. CSS样式定义 #### 2.1 绝对定位与层叠上下文 - **`position: absolute;`**：此...
这个框架的进化版不仅保持了原有的功能，还优化了性能和用户体验，同时增加了对多种浏览器的兼容性，包括较老版本的Internet Explorer（IE6、IE7、IE8）、Firefox以及Chrome。这样的兼容性设计使得该插件可以在更...
### 滤镜问题-FireFox火狐浏览器与IE的对比分析 在Web开发领域，浏览器兼容性一直是开发者关注的重点之一。特别是在早期的Web技术发展中，不同浏览器对标准的支持程度存在较大差异，导致了多种特有的样式和效果实现...