Bonsoir, je suis en train de faire un petit script de redimensionnement en javascript. Le principe est simple : quand on clic (onmousdown) il commence à scruter les mouvements du pointeur (onmousemove) et redimensionne l'objet en conséquence.
Seulement voilà, quand je clic, s'il s'agit de texte il continue à me sélectionner le texte, ce qui n'est pas terrible, et quand il s'agit d'une image, il essaye de me faire son drag'n drop à lui (pour enregistrer l'image je crois) et ça fait tout planter.
En cherchant un peu j'ai trouvé cet article dans lequel on lit :
Tout content, j'ajoute un "return false;" à la fin de ma fonction, mais rien n'y fait, le navigateur ne se plie pas du tout à mes désirs ^^;
voici donc une demo, et mon code :
PS : code html crade qui valide pas, javascript pas externalisé, tout ça tout ça, je sais, c'était pas ma priorité j'ai fait ça en 30 sec pour vous montrer le problème.
Modifié par BlueScreenJunky (04 Jun 2007 - 22:37)
Seulement voilà, quand je clic, s'il s'agit de texte il continue à me sélectionner le texte, ce qui n'est pas terrible, et quand il s'agit d'une image, il essaye de me faire son drag'n drop à lui (pour enregistrer l'image je crois) et ça fait tout planter.
En cherchant un peu j'ai trouvé cet article dans lequel on lit :
a écrit :
Finally drag handler returns false. This is hugely important! By returning false you tell the browser that you are handling the event and not to follow through with its own default behavior. If you don't return false and you try to drag an image it's not going to work because the default behavior of the browser is that if a user drags an image, he wants to drag it to his desktop or a to a desktop application and that will over-ride the behavior YOU are setting up. When you return false the browser will bow to your wishes.
Tout content, j'ajoute un "return false;" à la fin de ma fonction, mais rien n'y fait, le navigateur ne se plie pas du tout à mes désirs ^^;
voici donc une demo, et mon code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#conteneur {background-color: #DDD;}
.poignee {cursor:n-resize;}
</style>
<script type="text/javascript">
//<!--
function resize(e) {
y = e.clientY;
document.getElementById("monimage").style.height = y-15 + "px";
return false;
}
function drag(){
document.onmousemove = resize;
document.onmouseup= drop;
return false;
}
function drop(){
document.onmousemove = null;
document.onmouseup= null;
}
//-->
</script>
</head>
<body>
<div id="conteneur">
<img id="monimage" src="big_smile.png" alt=":D" /><br />
<span onmousedown="javascript:drag()" class="poignee">drag me </span> <img class="poignee" src="poignee.png" alt="" onmousedown="javascript:drag()" />
</div>
On peut voir ici que lorsqu'on redimensionne en cliquant sur le texte, il reste possible de sélectionner le texte. Pire lorsqu'on redimensionne en cliquant sur l'image, le navigateur essaye de faire du drag'n drop avec l'image pour la copier, et ça fait tout planter.
</body>PS : code html crade qui valide pas, javascript pas externalisé, tout ça tout ça, je sais, c'était pas ma priorité j'ai fait ça en 30 sec pour vous montrer le problème.
Modifié par BlueScreenJunky (04 Jun 2007 - 22:37)
) 
,