Drag/drop/redimensionner...

Commenter

Contenu du snippet

Cette petite source est certe connue vu partout mais elle est assez simple et avancé...
Grâce à cette source vous pourez déplacer, redimensioner positionner en arrière plan ou devant un objet comme vous le voulez avec un petit plus: Le curseur change d'asspect lors ce que vous pouvez redimensionner l'objet...
Je les fais vites fais il se peut qu'il y'est encore des bugs...

//Tout est dans l'archive...//
Vous verez dans <head> </head> le script JavaScipt de tout le fonctionnement de cette source, celle ci n'est pas à modifier...
Dans <body></body> vous verez des DIV (4 exectement) elles ont une ID ces ID peuvent être changer comme bon vous le semble elle n'ont pas d'importance à part ne pas mettre deux fois le même nom...
Dans ces DIV il ya 2 fonctions:
onmousemove='curseur(this.id)' et onmousedown='position(this.id)'
Dans chaque objet que vous voulez qu'il soit déplacable copiez ce petit code dans ces propriétées il sera lors déplacable, redimensionnable et tou fonctionnera sans rien changer d'autre...
Sa peut aussi marcher pour des images des tableaus...

Sinon tout les informations des fonctions sont disponibles dans la source...

Je vous prie de m'excuser à l'avance des fautes d'orthographe car quand j'écris j'écris assez vite...d

Source / Exemple : 


<html>
<head>
<script language="javascript">

//Ici se sont les variables pour stocker toute les données des objets lors du survole ou du clique (onmousedown)...
var x=0;
var y=0;
var deplacable=0;
var objet="";
var gauche="";
var haut="";
var plan=0;
var mode=0;

function bouger(e){
if(navigator.appName=="Microsoft Internet Explorer"){x=e.clientX;y=e.clientY}
else{x=e.pageX;y=e.pageY} //Récupération de la position du curseur suivant la compatibilité du navigateur...
x=x+eval(document.body.scrollTop);
y=x+eval(document.body.scrollLeft);
if(deplacable){ //Si un objet est déplacable/redimmensionnable alors le déplacer ou redimmensionner...

if(mode==1){ //Si on redimensionne par la droite...
gauchea=document.getElementById(objet).style.left;
gauchea=gauchea.replace("px","");
gauchea=gauchea.replace("pt","");
if(x-gauchea>=0){ //Simple vérification que l'objet ne passe pas en dessous de 0 sa ne peut pas exister un objet avec une valeur négative en taille...
document.getElementById(objet).style.width=x-gauchea;
}
}

else if(mode==2){ //Si on redimmensione par le bas...
hauta=document.getElementById(objet).style.top;
hauta=hauta.replace("px","");
hauta=hauta.replace("pt","");
if(y-hauta>=0){
document.getElementById(objet).style.height=y-hauta;
}
}

else if(mode==3){ //Si on redimensionne par le coin bas gauche...
hauta=document.getElementById(objet).style.top;
hauta=hauta.replace("px","");
hauta=hauta.replace("pt","");
gauchea=document.getElementById(objet).style.left;
gauchea=gauchea.replace("px","");
gauchea=gauchea.replace("pt","");
if(y-hauta>=0 && x-gauchea>=0){
document.getElementById(objet).style.width=x-gauchea;
document.getElementById(objet).style.height=y-hauta;
}
}

else{ //Déplacer l'objet...
document.body.style.cursor='move';
document.getElementById(objet).style.left=x-gauche;
document.getElementById(objet).style.top=y-haut;
}
}
}
function position(nom){ //On récupère la position du curseur par rapport à l'objet...
objet=nom;
deplacable=1 //On dit que l'objet est maintenant déplacable...
document.getElementById(nom).style.zIndex=plan; //On positionne l'objet en premier plan...
plan=plan+eval(1);

haut=document.getElementById(nom).style.top;
haut=haut.replace("px","");
haut=haut.replace("pt","");
haut=y-haut;

gauche=document.getElementById(nom).style.left;
gauche=gauche.replace("px","");
gauche=gauche.replace("pt","");
gauche=x-gauche;
}
function curseur(nom){ //Vérification, changement du cuseur par rapport à l'objet...
if(deplacable==false){ //Si l'objet n'est pas en train d'être déplacé ou redimensionné...

haut=document.getElementById(nom).style.top; //Vérification de la position verticale...
haut=haut.replace("px","");
haut=haut.replace("pt","");
haut=y-haut; //Position du cuseur sur l'objet verticalement...

gauche=document.getElementById(nom).style.left;  //Vérification de la position verticale...
gauche=gauche.replace("px","");
gauche=gauche.replace("pt","");
gauche=x-gauche; //Position du cuseur sur l'objet verticalement...

longeur=document.getElementById(nom).style.width; //On récupère la longeur de l'objet...
longeur=longeur.replace("px","");
longeur=longeur-5;

largeur=document.getElementById(nom).style.height; //On récupère la largeur (hauteur de l'objet...
largeur=largeur.replace("px","");
largeur=largeur-5;

if(gauche>longeur){ //Si le curseur est positionné à droite de l'objet...
mode=1;
document.body.style.cursor="e-resize";
}
else if(haut>largeur){ //Si le curseur est positionné en bas de l'objet...
mode=2;
document.body.style.cursor="s-resize";
}

else{ //Si le curseur est positionné au cente de l'objet...
mode=0;
document.body.style.cursor="default"; 
}

if(haut>largeur && gauche>longeur){ //Si le curseur est positionné en bas à gauche...
mode=3;
document.body.style.cursor="se-resize";
}
}
}

</script>
<title>Gestionnaire d'objets...</title>
</head>
<body bgcolor="#ffeecc" onmousemove="bouger(event)" onmouseup="deplacable=0;mode=0">

<div onmousemove='curseur(this.id)' onmousedown='position(this.id)' id="fenettre" style="position:absolute;left:5;top:5;width:100;height:100;background:black"></div>

<div onmousemove='curseur(this.id)' onmousedown='position(this.id)' id="fenettre2" style="position:absolute;left:5;top:5;width:100;height:100;background:red"></div>

<div onmousemove='curseur(this.id)' onmousedown='position(this.id)' id="fenettre3" style="position:absolute;left:5;top:5;width:100;height:100;background:green"></div>

<div onmousemove='curseur(this.id)' onmousedown='position(this.id)' id="fenettre4" style="position:absolute;left:5;top:5;width:100;height:100;background:blue"></div>

</body>
</html>

Conclusion :


Marche parfaitement sous IE et Firefox mis à part d'un petit problemme avec le curseur qui montre qu'il est impossible de déplacer l'objet (un rond barré) mais sinon sa marche sa veut rien dire le curseur... D'ailleur si quelqu'un pouvait me dire comment cacher le curseur rond barré sous firefox sa me serait bien utile...

N'hésitez pas à poser des questions ou donnez vos avis...
Merçi d'avoir pris la peine de regarder ma source...

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (sitajony)