<!
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;
// alert(nn6);
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 = " body " ;
alert(oDragHandle.tagName);
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" />
< img src ="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class ="dragAble" />
< img src ="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class ="dragAble" />< br />< br />
< div style ="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class ="dragAble" > 这些都是可拖动对象 </ div >
< div style ="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class ="dragAble" id ="aa" > 这些都是可拖动对象 </ 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 ="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;
// alert(nn6);
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 = " body " ;
alert(oDragHandle.tagName);
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" />
< img src ="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class ="dragAble" />
< img src ="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class ="dragAble" />< br />< br />
< div style ="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class ="dragAble" > 这些都是可拖动对象 </ div >
< div style ="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class ="dragAble" id ="aa" > 这些都是可拖动对象 </ div >
</ body >
</ html >