Drag/drop/redimensionner...

Soyez le premier à donner votre avis sur cette source.

Snippet vu 6 873 fois - Téléchargée 16 fois

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

Ajouter un commentaire Commentaires
Utilisateur anonyme
UP
Salut, j'aimerais en savoir plus, j'ai limpression que la discussion du sujet n'est pas fini!
Sinon est ce que le code est terminé?
Merci
Messages postés
11
Date d'inscription
vendredi 7 mai 2010
Statut
Membre
Dernière intervention
31 mai 2011

oui merci bien sa fonctionne,mais j'ai remarquer qu'on ne peut pas deplacer les div dans tous les sens
en faite ce que je ve,c'est redimensionner les div proportionellement et les deplacer ou je veux dans tous les sens
Merci d'avance
Messages postés
103
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
9 juin 2010

J'ai mis à jour mon code pour le problème du "body", ça venait d'une erreur de syntaxe, sinon j'ai remarqué un problème dans mon code, je corigerais la prochaine fois mais sinon il n'ya plus de problème avec "body"...
Messages postés
11
Date d'inscription
vendredi 7 mai 2010
Statut
Membre
Dernière intervention
31 mai 2011

en faite j'ai testé le code sur google chrome et jarrive pas a le faire fonctionner pa de deplacement pas de redimenstionnement, je l'ai testé sous chrome firefox,et ie et sa marche pas, a propo je suis sous windows7
c'est le code que j'utilise
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<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>

</head>

</html>
Messages postés
103
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
9 juin 2010

Quel est votre navigateur? Normalement cela fonctionne sur n'importe quel navigateur mais si vous avez moyen d'indiquer la ligne où se trouve l'erreur ça serait mieux pour répondre.
Essayez de taper "javascript:alert(document.body)" sur la barre d'adresse de votre navigateur, si aucune boite de dialogue s'affiche alors le problème doit venir de votre navigateur.
Afficher les 15 commentaires

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.