Heim >Web-Frontend >js-Tutorial >Ausführliche Erklärung, wie Sie Javascript verwenden, um das div-Modul mit dem Beispielcode der Maus zu ziehen

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

伊谢尔伦Original: 2017-07-24 10:08:391485Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erklärung zum Erstellen und Verwenden eines erweiterten Timer-Beispielcodes in JavascriptNächster Artikel：Ausführliche Erklärung zum Erstellen und Verwenden eines erweiterten Timer-Beispielcodes in Javascript

In Verbindung stehende Artikel

Mehr sehen