DRAG/DROP/REDIMENSIONNER...

Signaler
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
 Utilisateur anonyme -
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/50481-drag-drop-redimensionner

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>
Afficher les 15 commentaires