DRAG AND DROP ET REDIMENSIONNEMENT
jhenaff
Messages postés
9
Date d'inscription
dimanche 16 novembre 2003
Statut
Membre
Dernière intervention
12 octobre 2006
-
6 sept. 2006 à 01:49
cs_saadellaoui Messages postés 11 Date d'inscription vendredi 7 mai 2010 Statut Membre Dernière intervention 31 mai 2011 - 26 mai 2011 à 11:34
cs_saadellaoui Messages postés 11 Date d'inscription vendredi 7 mai 2010 Statut Membre Dernière intervention 31 mai 2011 - 26 mai 2011 à 11:34
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/39451-drag-and-drop-et-redimensionnement
https://codes-sources.commentcamarche.net/source/39451-drag-and-drop-et-redimensionnement
26 mai 2011 à 11:34
en plus je veux que le redimensionnement de la taille d'image ou de div soit d'une manière proportionnelle.comment je dois faire?
Merci d'avance
27 janv. 2010 à 13:30
http://www.javascriptfr.com/codes/TRAITEMENT-ADAPTER-LARGEUR-COLONNES-DANS-TABLEAU-TALC_43572.aspx
Bonne journée à tous.
29 déc. 2009 à 11:04
29 déc. 2009 à 09:51
Toutefois serait-ce possible de resize des cercles/disque et non des rectangles ?
Merci d'avance
14 mai 2009 à 10:23
j'essaye de l'implementer dans une page web et j'ai besoin de savoir comment peut on recuperer la position des rectangle afin de l'enregistrer sur ma bdd apres une valisation par un bouton.
merci d'avance
23 janv. 2009 à 12:39
:-)
21 août 2008 à 15:18
Pour CALITOM, supprime ces lignes et ça marchera:
if(vgCurrentPositionX==X_OTHER && vgCurrentPositionY==Y_OTHER)
{
vgCurrentX = vgMouseX-vgMouseDiffX;
vgCurrentY = vgMouseY-vgMouseDiffY;
}
23 avril 2008 à 13:18
Cependant, il me manque une fonction essentielle, celle de récupérer les coordonnées des div.
Malheureusement, je n'ai aucune idée de comment y arriver (je débute en PHP - Javascript).
Quelqu'un aurait-il une idée de comment faire à partir de ce script ??
Merci d'avance
4 nov. 2007 à 19:14
Trés bon script compatible IE7 et FF
Mais cependant une chose que je trouve trés dommage pour les débutants et les dévellopeurs confirmés:l'absence de commentaires.
Si tu pouvais le commenter ça serait parfait.
16 août 2007 à 12:14
Superbe ce script!
Je voudrais utiliser la partie qui permet de redimensionner le div sans le déplacement...
Comment faire?
30 avril 2007 à 12:26
je l'ai adapté en php/mysql pour pouvoir sauvegarder l'environnement et nommer les fenêtres
http://www.phpcs.com/codes/MINI-PORTAIL_42510.aspx
17 avril 2007 à 18:53
Je réussi pas à mettre un fichier .swf dans le script pour le déplacer et le redimmensionné. Je veux mettre une image en arrière et mettre les ficiers flash en avant. J'essais et j'essais pas capable, faut dire que je suis pas très bon dans le domaine....
Merci à l'avance.
22 mars 2007 à 21:11
J'aimerais cependant avoir une petite info.
Je souhaiterais utiliser ce calque amovible à l'intérieur d'une zone définie (une cellule de tableau de 200px par 200px par exemple).
Quelles sont les ajouts/modifications à effectuer pour "bloquer" le déplacement afin qu'il ne sorte pas de la zone choisie (dans notre exemple, que la zone de déplacement soit limité par ces 4 pts :
0,0 0,200
200,0 200,200)
Merci d'avance.
2 mars 2007 à 14:01
si suffit de remplacer la fonction existante par celle ci et chpouff plus de souci d'agrandissement intenpestif :
function fnResizeDiv()
{
if(vgCurrentElement!=null && vgCurrentElement!=undefined)
{
if (navigator.appName.substring(0,3) == "Net") {
document.getElementById(vgCurrentElement).style.left = vgCurrentX;
document.getElementById(vgCurrentElement).style.top = vgCurrentY;
document.getElementById(vgCurrentElement).style.width = vgCurrentWidth-20;
document.getElementById(vgCurrentElement).style.height = vgCurrentHeight-20;
}else {
document.getElementById(vgCurrentElement).style.left = vgCurrentX;
document.getElementById(vgCurrentElement).style.top = vgCurrentY;
document.getElementById(vgCurrentElement).style.width = vgCurrentWidth;
document.getElementById(vgCurrentElement).style.height = vgCurrentHeight;
}
}
}
1 déc. 2006 à 08:15
Tout d'abord, je dois dire que ce script est vraiment bien fait! Merci pour ta source!
J'ai cependant une petite question (juste histoire de compliquer les choses :d).
En fait, j'ai créé un script PHP générant les claques redimensionnables en fonction du nombre déterminé ar l'utilisateur. Et donc je voulais savoir comment faire pour récupérer les nouvelles coordonnées des calques dans un formulaire? Car mon probème, c'est que je ne peux récupérer que celui que l'on redimensione à l'instant t. Voici mon petit bout de code:
if(vgCurrentElement!=null && vgCurrentElement!=undefined)
{
document.getElementById(vgCurrentElement).style.left = vgCurrentX;
document.getElementById(vgCurrentElement).style.top = vgCurrentY;
document.getElementById(vgCurrentElement).style.width = vgCurrentWidth;
document.getElementById(vgCurrentElement).style.height = vgCurrentHeight;
document.form1.formtext1.value=vgCurrentX;
document.form1.formtext2.value=vgCurrentY;
document.form1.formtext3.value=vgCurrentWidth;
document.form1.formtext4.value=vgCurrentHeight;
}
12 oct. 2006 à 08:33
la solution est donc d'ajouter des bordures au div (genre 10 px) si l'object est dans un div refimensionnable, ou à l'object lui même et tu pourra le redimensionner ta vidéo en sélectionnant les bordures.
Sinon tu peux aussi englober l'object dans un div 20% plus grand par exemple ce qui te laisse 20% de marge pour le déplacer. Mais des que tu survole l'object lui même c'est l'activex qui prend le dessus et plus moyen de le déplacer.
J'espere que ca t'aidera un peu tout de même.
11 oct. 2006 à 12:21
je te remercie de ta reactivité =)
j'avais déjà essayé ces 2 possibilités avant de laisser un commentaire.
si je precise 100% ou que je donne une IDentité a mon objet sans préciser sa taille, je n'ais pas de lecteur, pas de média...
je vais essayer de modifier le lecteur ce soir... merci encore... si tu as une autre idée ;-)
11 oct. 2006 à 08:25
<object type="application/x-shockwave-flash" width="350" height="250" id="video1" name="video1" onMouseOver="fnOnMouseOver('video1');" onMouseOut="fnOnMouseOver();"
wmode="transparent" data="flv/flvplayer.swf?file=<?php echo $_POST['video']; ?>.flv">
.flv" />
et dans ce cas plus besoin de le contenir dans un div.
10 oct. 2006 à 20:55
merci pour cette superbe source!
cependant pour le precedent commentaire, je me demande si vous pourriez corriger mon erreur....
j'essaye d'inclure votre script a ma future page pour lire des video format flash.
voici le code que j'utilise
<object type="application/x-shockwave-flash" width="350" height="250"
wmode="transparent" data="flv/flvplayer.swf?file=<?php echo $_POST['video']; ?>.flv">
.flv" />
</object>
la video flash apparait bien, mais elle n'est ni déplacable, ni même redimmensionnable... sachant que pour moi tout l'interet est de pouvoir redimmensionner la video a la demande... pas de la déplacer :D
pourriez vous orienter mes recherches? je vous en remercis par avance.
2 oct. 2006 à 08:34
1 oct. 2006 à 18:45
Une petite question, est ce possible de mettre des fichiers .jpg , .gif ou flash à la place des carreaux afin de mettre les images ou animation flash à une endroit avec la souris ? ? ?
25 sept. 2006 à 18:34
dans la fonction fnOnMouseDown() il faudra donner un z-index élevé (ex 10) à l'élément sélectionné :
function fnOnMouseDown()
{
vgMouseDown = true;
if(vgCurrentElement!=null && vgCurrentElement!=undefined)
{
//first plan
document.getElementById(vgCurrentElement).style.zIndex = 10;
//Init of size
vgCurrentX = document.getElementById(vgCurrentElement).offsetLeft;
vgCurrentY = document.getElementById(vgCurrentElement).offsetTop;
vgCurrentWidth = document.getElementById(vgCurrentElement).offsetWidth;
vgCurrentHeight = document.getElementById(vgCurrentElement).offsetHeight;
//Init of distance
vgMouseDiffX = vgMouseX-vgCurrentX;
vgMouseDiffY = vgMouseY-vgCurrentY;
//Init of position
if(vgMouseDiffX < 20 || (vgCurrentWidth-vgMouseDiffX) < 20)
{
if(vgMouseDiffX < vgCurrentWidth/2)
vgCurrentPositionX = X_LEFT;
else
vgCurrentPositionX = X_RIGHT;
}
else
vgCurrentPositionX = X_OTHER;
if(vgMouseDiffY < 20 || (vgCurrentHeight-vgMouseDiffY) < 20)
{
if(vgMouseDiffY > vgCurrentHeight/2)
vgCurrentPositionY = Y_DOWN;
else
vgCurrentPositionY = Y_UP;
}
else
vgCurrentPositionY = Y_OTHER;
vgTimerMouse = setInterval("fnOnMouseMove();", vgTimerTime);
}
}
et lorsqe l'on relache la souris le remettre à 1
function fnOnMouseUp()
{
if(vgCurrentElement!=null && vgCurrentElement!=undefined)
document.getElementById(vgCurrentElement).style.zIndex = 1;
vgMouseDown = false;
clearInterval(vgTimerMouse);
}
Le seul probleme est que lorsqu'on le remet à 1, il peut repasser derriere les autres blocs.
Mais si on ne le remet pas à 1, les blocfs vont tous rester à 10.
25 sept. 2006 à 17:50
sinon y'a une solution pour faire que l'element que l'on deplace devienne l'element qui "sera par dessus" les autres ?
la je pense notamment à la propriété z-index en CSS ...
23 sept. 2006 à 14:59
22 sept. 2006 à 16:53
je voudrai savoir quoi modifier dans cette source pour n'avoir que le déplacement des blocs sans le redimensionnement.
Merci bien!
18 sept. 2006 à 23:18
14 sept. 2006 à 10:59
13 sept. 2006 à 15:47
je viens de me mettre à javascript. Je suis en train de faire un système de réservation en php/mysql utilisant de l'ajax.
Merci pour ton script qui va vraiment me faire gagner du temps !
12 sept. 2006 à 13:03
Vraiment un grand merci :)
11 sept. 2006 à 16:07
Au lieu d'utiliser des Pop-Ups pour afficher une
image ou une description, on peut utiliser ton
script. Ainsi, l'utilisateur n'est pas sorti du
contexte à cause d'un Pop-Up.
Bon travail.
8 sept. 2006 à 10:17
7 sept. 2006 à 15:19
bonne source !
pour info ça fonctionne avec opéra 9.0
6 sept. 2006 à 13:01
En fait la capture de la taille des blocs est faite par offsetWidth/offsetHeight et la redimension par style.width/style.height et offsetWidth est compris différemment par les navigateurs (ex : Firefox->taille interne du bloc en enleveant les bordures et IE taille totale du bloc). Je vais essayer de corriger ca.
Pour la superposition des blocs, seul le bloc du dessus retourne l'événement onMouseOver, donc il n'y a pas le choix. A moins de donner un z-index élevéau dernier bloc sélectionner pour le remettre au premier plan.
Sinon le script est compatible Firefox et IE, mais je n'ai pas testé Opéra ou d'autres, donc à tester.
6 sept. 2006 à 11:05
Bon je sais ça tient du détail : )
Oh fait est ce que ton script est compatible avec tous les navigateurs ? Il me semble que 'getElementById' n'est pas implémenté par tous et qu'il faut dans certain cas utiliser 'all' ... ?
6 sept. 2006 à 01:49