Detailed explanation of how to use javascript to drag the div module with the mouse example code-JS Tutorial-php.cn

Detailed explanation of how to use javascript to drag the div module with the mouse example code

伊谢尔伦

Release： 2017-07-24 10:08:39

Original

1498 people have browsed it

document.all[] is an array variable composed of all tags in the document, including all elements in the document object;

The value of event.button: 0 no button pressed 1 pressed Left button 2 Press right button 3 Press left and right button 4 Press middle button 5 Press left and middle button 6 Press right and middle button 7 Press all keys

The following is the implementation code, imitating window, and making it coverable Live select

<!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"> 
<head> 
<title>测试可动p</title> 
<script language=&#39;javascript&#39; type=&#39;text/javascript&#39;> 
var offset_x; 
var offset_y; 
function Milan_StartMove(oEvent,p_id) 
{ 
var whichButton; 
if(document.all&&oEvent.button==1) whichButton=true; 
else { if(oEvent.button==0)whichButton=true;} 
if(whichButton) 
{ 
var op=p_id; 
offset_x=parseInt(oEvent.clientX-op.offsetLeft); 
offset_y=parseInt(oEvent.clientY-op.offsetTop); 
document.documentElement.onmousemove=function(mEvent) 
{ 
var eEvent; 
if(document.all) eEvent=event; 
else{eEvent=mEvent;} 
var op=p_id; 
var x=eEvent.clientX-offset_x; 
var y=eEvent.clientY-offset_y; 
op.style.left=(x)+"px"; 
op.style.top=(y)+"px"; 
var d_op=document.getElementById("disable_"+op.id); 
d_op.style.left=(x)+"px"; 
d_op.style.top=(y)+"px"; 
} 
} 
} 
function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; } 
function p_Close(o) 
{var op=o; op.style.display="none";var d_op=document.getElementById("disable_"+o.id);d_op.style.display="none";} 
</script> 
</head> 
<body> 
<p id="op" style="position:absolute;width:100px;height:60px;border:1px solid silver;left:100px;top:100px;z-index:9999;"> 
<p id="move" onmousedown="Milan_StartMove(event,this.parentNode)" onmouseup="Milan_StopMove(event)" 
style="cursor:move;width:100%;height:15px;background-color:#0066cc; font-size:10px;"> 
<p onclick="p_Close(this.parentNode.parentNode)" style="float:right; width:10px; height:100%; cursor:hand; background-color:#cc3333; color:White;font-size:15px;">X</p> 
</p> 
<span>测试一下</span> 
</p> 
<p id="disable_op" style="position:absolute;left:100px;top:100px;width:100px; height:60px; z-index:9998;FILTER:alpha(opacity=50);";> 
<iframe src="about:blank" name="hiddenIframe" width="100%" frameborder="0" height="60px" title="遮盖层"></iframe></p> 
<select name="ListHead1$DropDownList3" id="ListHead1_DropDownList3"> 
<option selected="selected" value=""></option> 
<option value="2">3333</option> 
<option value="6">1111</option> 
<option value="B">222</option> 
</select> 
</body> 
</html>

Copy after login

Is this draggable p much better now? Don't worry about the choice anymore. The one released before can only work normally under IE, mainly using parentElement. Now it is replaced with parentNode and the CSS style is adjusted so that it can also run normally under FF.

The above is the detailed content of Detailed explanation of how to use javascript to drag the div module with the mouse example code. For more information, please follow other related articles on the PHP Chinese website!