Mise en place des divs

Cette étape c’est la plus simple.

Dans le head, il faut juste charger les librairies script.aculo.us.

<script src="./lib/prototype.js" type="text/javascript"></script>
<script src="./src/effects.js" type="text/javascript"></script>
<script src="./src/dragdrop.js" type="text/javascript"></script>

On va ajouter nos fonctions sympa pour l’effet drag and drop.

<script language="javascript" type="text/javascript">

	function cache ( id ) {
		id.style.border = '1px dashed #000000';
	}

	function affiche ( id ) {
		id.style.border = '1px solid #000000';
	}
</script>

Là on prépare notre CSS :

<style type="text/css">
	#boiteDimToMove {
		border: 1px solid #000000;
		width: 120px;
		height: 120px;
		float: left;
		background:#FF00FF;
	}

	#boiteDim {
		border: 1px solid #000000;
		width: 10px;
		height: 10px;
		margin-left: 109px;
		margin-top: 109px;
		float: left;
		background:#FF0000;
	}
</style>

Maintenant on créer nos divs (dans le body)

<div id="boiteDimToMove" onmouseup="affiche(this)" onmousedown="cache(this)">
	<div id="boiteDim" onmouseup="affiche(this)" onmousedown="cache(this)" >
	</div>
</div>

Et on affecte à nos div la fonction draggable (sinon sans ça, nous pourrions pas déplacer nos divs).

<script type="text/javascript">
	new Draggable('boiteDim');
	new Draggable('boiteDimToMove');
</script>

Voila ce que ça va donner au final : sur ce lien

Bon tout est prêt, on va pouvoir s’attaquer au plu dur :p

Agrandir une fenêtre

Dans cette exemple c’est la petite div rouge qui va définir la taille de la plus grosse.

Mais comment on va procéder roul ?

C’est pas compliqué, quand l’utilisateur va déplacer la div rouge, au moment de relâcher le bouton de la souris, le javascript va récupérer la position de la souris et va élargir la fenêtre (le div rose) jusqu’à cette position.

En traduction html ce la va donné :

	<div id="boiteDimToMove" onmouseup="affiche(this)" onmousedown="cache(this)">
		<div id="boiteDim" onmouseup="UpdateDiv(event,this)" onmousedown="cache(this)" >
		</div>
	</div>

function UpdateDiv(e,boiteDim){
    var iPosY = e.pageY; // position ordonnée du curseur
    var iPosX = e.pageX;  // position abscisse du curseur
    alert('iPosY : '+iPosY+"\n"+'iPosX : '+iPosX)
    affiche(boiteDim);
}

Voila ce que cela doit afficher :

Le code source est ici

Pour modifier la taille de la fenêtre, on va toucher au style.
pour récupérer le style en javascript il faut utiliser :
document.getElementById(ID).style

Après pour définir les attributs, il faut tout simplement utiliser le .
document.getElementById(‘boite’).style.width correspond à la propriété width du style du div boite

Voila ce que la va donner :

function UpdateDiv(e,boiteDim){
    var iPosY = e.pageY; // position ordonnée du curseur
    var iPosX = e.pageX;  // position abscisse du curseur
    var oStyleToMove = document.getElementById(boiteDim.id+'ToMove').style;
    // oStyleToMove le style de la div boiteDimToMove

    oStyleToMove.width = iPosX; // on élargi la div
    oStyleToMove.height = iPosY; // on allonge la div
    cache(boiteDim);
}

Le code source est ici

Oui en effet ce script ne prend pas en compte de l’emplacement de la fenêtre, pour son redimensionnement.
Nous allons corriger cela. Pour connaitre la dimension de la fenêtre nous allons soustraire la position de la fenêtre à celle du curseur. (pas besoin d’être fort en math ^^)

Pour récupérer la position de la fenêtre nous allons concentrer sur son style (plus précisément à la propriété top et left).
oStyleToMove.top
oStyleToMove.left

on va afficher ces variables :

alert('Y : '+oStyleToMove.top+"\n X : "+oStyleToMove.left);

soustraction

    // on enlève le px au coordonnée de la fenêtre
    var oExp =new RegExp("px", "g");
    var sTop = oStyleToMove.top.replace(oExp,'');
    var sLeft = oStyleToMove.left.replace(oExp,'');

On a plus qu’à faire la soustraction :

    var iPosY = e.pageY - sTop; // position ordonnée de la fenêtre
    var iPosX = e.pageX - sLeft;  // position abscisse de la fenêtre

Le code source :
c’est là

Et voila, maintenant nos utilisateurs peuvent redimensionner leur fenêtre en quelque clics

Pour aller plus loin

Je me suis aperçus que le petit cadre rouge n’est pas exactement coller en bas à droite.

Pour réajuster le tir, on va mettre à zero le style left et top (qui est utilisé par script.aculo.us.)

voici la correction :

 var oStyle = boiteDim.style;
    oStyle.marginLeft=iPosX- boiteDim.offsetHeight;
    oStyle.marginTop=iPosY- boiteDim.offsetWidth;
    oStyle.left=0;
    oStyle.top=0

Ce qui va donner au final ce code.

Compatibilité avec Internet Explorer

Internet Explorer nous facile vraiment pas le vie. nous allons voir comment rendre ce script compatible avec
IE.

Pour récupérer la position du curseur cela change :

var Xposition = (navigator.appName.substring(0,3) == "Net") ? e.pageX : e.clientX ;
var Yposition = (navigator.appName.substring(0,3) == "Net") ? e.pageY : e.clientY ;

et pour la position de la petite div

  if (navigator.appName.substring(0,3) == "Net")
    {
    	oStyle.marginLeft=iPosX - boiteDim.offsetHeight;
    }else
    {
    	oStyle.marginLeft=iPosX;
    }
 

Voila la version final compatible Internet Explorer