DRAG/DROP/REDIMENSIONNER...
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
26 août 2009 à 06:55
Utilisateur anonyme - 31 oct. 2011 à 13:11
Utilisateur anonyme - 31 oct. 2011 à 13:11
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
https://codes-sources.commentcamarche.net/source/50481-drag-drop-redimensionner
31 oct. 2011 à 13:11
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
30 mai 2011 à 14:16
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
30 mai 2011 à 14:11
30 mai 2011 à 14:06
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>
30 mai 2011 à 13:44
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.
30 mai 2011 à 11:37
quelqu'un peut maider?
Merci d'avance
29 août 2009 à 15:02
29 août 2009 à 13:51
29 août 2009 à 12:46
pourquoi ne pas utilise offset au lieux de style (ex : style.left devient offsetLeft ) sa evite de faire un replace et le script sera largement plus court
tu ne gère pas le scroll
sur ff tu a un rond barre car le drag ne se fait pas
sinon sa marche quand meme c'est deja pas mal
27 août 2009 à 02:14
26 août 2009 à 16:52
26 août 2009 à 14:19
Bon essai tout de même ;)
JDMCreator
26 août 2009 à 13:54
Oui pour la fonction parseInt sa peut réduire quelques lignes de code... Sinon j'ai plus fait en sorte que sa fonctionne pas que sa soit normalisé, court...
Mais merçi des commentaires peut être que je ferais une mis à jour du code pour le rendre le plus simple et court... Là j'ai pas le temp mais peut être un jour...
26 août 2009 à 07:07
exemple :
if( mode==1 )
{ gauchea=parseInt(document.getElementById(objet).style.left,10);
if( x-gauchea >= 0 )
{ document.getElementById(objet).style.width=x-gauchea+"px"; }
}
et que probablement manque var ( var gauchea... )
@+
26 août 2009 à 06:55
_ manque doctype, par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
_ <script type="text/javascript"> vaut mieux
_ replace px et pt : mieux vaut aussi parseInt, exemple :
...gauchea=parseInt(document.getElementById(objet).style.left,10);
if(x-gauchea>=0)...
_ pour le curseur, et que ça fonctionne de la même
manière avec les navigateurs :
<body ... onmousemove="bouger(event); return false;" ...
_ ça aurait sans doute été bien (mieux ?) de faire ça en POO.
_ fautes d'orthographe
faut prendre un correcteur d'orthographe.
@+