Ausführliche Erklärung, wie Sie Javascript verwenden, um das div-Modul mit dem Beispielcode der Maus zu ziehen-js-Tutorial-php.cn

Ausführliche Erklärung, wie Sie Javascript verwenden, um das div-Modul mit dem Beispielcode der Maus zu ziehen

伊谢尔伦

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

Original

1418 Leute haben es durchsucht

document.all[] ist eine Array-Variable, die aus allen Tags im Dokument besteht, einschließlich aller Elemente im Dokumentobjekt

Der Wert von event.button: 0 keine Schaltfläche gedrückt 1 gedrückt Linke Taste 2 Rechte Taste drücken 3 Linke und rechte Taste drücken 4 Mittlere Taste drücken 5 Linke und mittlere Taste drücken 6 Rechte und mittlere Taste drücken 7 Alle Tasten drücken

Das Folgende ist der Implementierungscode, der ein Fenster imitiert , und es abdeckbar machen Live-Auswahl

<!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>

Nach dem Login kopieren

Ist dieses ziehbare P jetzt viel besser? Machen Sie sich keine Sorgen mehr über die Wahl. Die zuvor veröffentlichte Version kann nur unter IE normal funktionieren und verwendet hauptsächlich parentElement. Jetzt wird sie durch parentNode ersetzt und der CSS-Stil wurde angepasst, sodass sie auch unter FF normal ausgeführt werden kann.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie Sie Javascript verwenden, um das div-Modul mit dem Beispielcode der Maus zu ziehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!