DRAG AND DROP ET REDIMENSIONNEMENT

Commentaire de devlo le 06/09/2006 11:05:05

Ton script est très sympa, il y a juste deux choses que j'ai remarqué : lorsqu'on clique sur l'un des divs pour le déplacer celui ci s'agrandi et lorsqu'on place l'un des divs au dessus de l'autre on ne peut plus déplacer celui qui est dessous sans enlever celui du dessus

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' ... ?

Commentaire de putch le 07/09/2006 15:19:02

salut !
bonne source !

pour info ça fonctionne avec opéra 9.0

Commentaire de frankydan le 11/09/2006 16:07:16

Moi aussi je trouve que c'est une très bonne idée.

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.

Commentaire de MrTuTu le 13/09/2006 15:47:21

Salut,
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 !

Commentaire de leprofmelo le 18/09/2006 23:18:58

excellent, je l'utilise immédiatement sur mon site....

Commentaire de jhenaff le 23/09/2006 14:59:52

Dans la fonction fononMouseDown, dans la partie init of position il suffit de mettre dans tous les cas X_OTHER et Y_OTHER

Commentaire de jhenaff le 25/09/2006 18:34:26

Oui c'est tout à fait possible :
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.

Commentaire de jhenaff le 02/10/2006 08:34:13

Oui tout a fait.

Commentaire de jhenaff le 11/10/2006 08:25:12

dans la balise object, tu spécifie une taille (350*250). Donc lorsque tu agrandis le div la contenant, tu n'agrandis pas l'object lui même. Donc 2 choix : soit tu définis l'object en width="100%" et height="100%", soit tu donne à cet object un id et un nom et c'est directement lui que tu déplace :
<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">
<param name="movie" value="flv/flvplayer.swf?file=<?php echo $_POST['video']; ?>.flv" />
<param name="wmode" value="transparent" />

et dans ce cas plus besoin de le contenir dans un div.

Commentaire de jhenaff le 12/10/2006 08:33:36

Effectivement tu as raison. En fait le browser place toujours l'élément object au premier plan ce et toutes les interractions avec le div le contenant sont perdues.
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.

Commentaire de myke666 le 02/03/2007 14:01:26

petite correction pour la fonction fnresize valable si on laisse la bordure à 10px :
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;
}
}
}

Commentaire de wissweb le 17/04/2007 18:53:19

Bonjour...

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.

Commentaire de calitom le 16/08/2007 12:14:05

Bonjour,

Superbe ce script!
Je voudrais utiliser la partie qui permet de redimensionner le div sans le déplacement...
Comment faire?

Commentaire de fabienvdf le 23/04/2008 13:18:42

merci beaucoup pour ce super script qui m'est très utile.
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

Commentaire de hornet_bzz le 23/01/2009 12:39:35

Simple, efficace, bien écrit, bien indenté, bravo !!!!!!

:-)

Commentaire de Tyra3l le 29/12/2009 09:51:15

Bonjour, super script très bien fait.
Toutefois serait-ce possible de resize des cercles/disque et non des rectangles ?

Merci d'avance

Commentaire de thierrysudfr le 27/01/2010 13:30:14

Bonjour Zen28, essaie ceci :
http://www.javascriptfr.com/codes/TRAITEMENT-ADAPTER-LARGEUR-COLONNES-DANS-TABLEAU-TALC_43572.aspx

Bonne journée à tous.