当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 网页最简短的拖动对象代码实例演示

Javascript
页面中body onload 和 window.onload 冲突的问题的解决
OnFocus与OnBlur的例子区别
javascript cloneNode()方法的使用
Javascript 文件夹选择框的两种解决方案
JQuery 风格的HTML文本转义
javascript 验证码生成代码 推荐学习
javascript new 需不需要继续使用
javascript 操作文件 实现方法小结
JavaScript 注册表访问实现代码
javascript web页面刷新的方法收集
Javascript 遍历对象中的子对象
javascript 具名函数的四种调用方式 推荐
javascript 写类方式之一
javascript 写类方式之二
javascript 写类方式之三
javascript 写类方式之四
javascript 写类方式之五
javascript 写类方式之六
javascript 写类方式之七
javascript 写类方式之八

No. « 143 144 145 146 »

技术文章搜索

关键字

Javascript 中的 网页最简短的拖动对象代码实例演示

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-11-04   浏览: 340 ::
收藏到网摘: n/a

以前在网上看到的最简单的拖动对象的代码，忘记作者叫什么了。原始代码在IE下有些小问题，并且声明了文档类型为xhtml 1.0后，在FF等非IE浏览器下无效，对其进行了改进，现在已经可兼容:IE、Firefox、Opera ...
以下代码只是演示原理，具体应用请结合你自己的实际需求进行修改。 
<!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="editor" content="枫岩,http://www.cnlei.com"> 
<meta name="keywords" content="代码实例：拖动对象"> 
<meta name="description" content="最简短的拖动对象代码实例演示"> 
<style> 
.dragAble {position:relative;cursor:move;} 
</style> 
<script language="javascript"> 
<!-- 
// Author:  Unkonw 
// Modify:  枫岩@CnLei.com 
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://webdesign.chinaitlab.com/UploadFiles_8014/200612/20061202115506895.gif" class="dragAble" /> 
<img src="http://webdesign.chinaitlab.com/UploadFiles_8014/200612/20061202115506895.gif" class="dragAble" /> 

<img src="http://webdesign.chinaitlab.com/UploadFiles_8014/200612/20061202115506895.gif" class="dragAble" /><br /><br /> 
<div style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class="dragAble">这些都是可拖动对象</div> 
</body> 
</html>