recherche

Maison  >  Article  >  interface Web  >  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

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

伊谢尔伦
伊谢尔伦original
2017-07-24 10:08:391478parcourir

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la façon de créer et d'utiliser un exemple de code de minuterie avancé en javascriptArticle suivant：Explication détaillée de la façon de créer et d'utiliser un exemple de code de minuterie avancé en javascript

Articles Liés

Voir plus