Explication détaillée de la façon d'implémenter le module div en glissant avec la souris à l'aide d'un exemple de code javascript-js tutoriel-php.cn

Explication détaillée de la façon d'implémenter le module div en glissant avec la souris à l'aide d'un exemple de code javascript

伊谢尔伦

Libérer： 2017-07-24 10:08:39

original

1505 Les gens l'ont consulté

document.all[] est une variable tableau composée de toutes les balises du document, y compris tous les éléments de l'objet document

La valeur de event.button : 0 aucun bouton ; enfoncé 1 enfoncé Bouton gauche 2 Appuyez sur le bouton droit 3 Appuyez sur les boutons gauche et droit 4 Appuyez sur le bouton du milieu 5 Appuyez sur les boutons gauche et central 6 Appuyez sur les boutons droit et central 7 Appuyez sur toutes les touches

Ce qui suit est le code d'implémentation, imitant la fenêtre , et le rendre couvrant 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>

Copier après la connexion

Ce p déplaçable est-il bien meilleur maintenant ? Ne vous souciez plus du choix. Celui publié auparavant ne peut fonctionner normalement que sous IE, principalement en utilisant parentElement. Il est désormais remplacé par parentNode et le style CSS est ajusté pour qu'il puisse également fonctionner normalement sous FF.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!