首页  »  网页设计教程  »  网页最简短的拖动对象源码实例演示

网页最简短的拖动对象源码实例演示

浏览数:共 482 次     评论:共 0 条     发布日期:2012-04-12     分类:javascript

以前在网上看到的最简单的拖动对象的代码,忘记作者叫什么了。原始代码在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");
//-->
</scri


pt>
</head>
<body>
<img src="http://img1.cssword.com/article/2012/0412/9640/1.gif" class="dragable" />
<img src="http://img1.cssword.com/article/2012/0412/9640/1.gif" class="dragable" />
<img src="http://img1.cssword.com/article/2012/0412/9640/1.gif" class="dragable" /><br /><br />
<div style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class="dragable">这些都是可拖动对象</div>
</body>
</html



上一篇:冒泡算法的3种JS表示
下一篇:利用JS简单制作抽奖系统