begin process at 2010 02 09 18:03:23
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > DRAG AND DROP ET REDIMENSIONNEMENT

DRAG AND DROP ET REDIMENSIONNEMENT


 Information sur la source

Note :
8,94 / 10 - par 16 personnes
8,94 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :drag, drop, redimensionnement, redimensionner Niveau :Initié Date de création :06/09/2006 Vu / téléchargé :22 959 / 4 459

Auteur : jhenaff

Ecrire un message privé
Commentaire sur cette source (34)
Ajouter un commentaire et/ou une note

 Description

Permet de déplacer des elements de la page et de les redimensionner à la souris.
Dans l'exemple il s'agit de div.
Cliquez au milieu des divs pour déplacer, ou sur les cotés pour redimensionner. Relechez la souris pour arreter.

Il reste juste à gérer l'icone du curseur.



 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

Source avec Zip Source avec une capture STOCK/FOREX CANDLE CHART USING CANVAS API par BlackWizzard
MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCR... par Phildepantin
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture OGG MEDIA PLAYER par kazma

 Sources en rapport avec celle ci

Source avec une capture DRAG/DROP/REDIMENSIONNER... par sitajony
Source avec Zip Source avec une capture DRAG DROP DE VIDEOS par kazma
DRAG & DROP SIMPLE, SIMPLE, SIMPLE par jdmcreator
Source avec Zip Source avec une capture DKSDRAGDROP : UNE BIBLIOTHÈQUE DE DRAG AND DROP ET DE GESTIO... par DARKSIDIOUS
Source avec Zip Source avec une capture BOXMANAGEMENT: COMME LA PAGE D'ACCUEIL PERSONALISÉE DE GOOGL... par the_wwt

Commentaires et avis

Commentaire de jhenaff le 06/09/2006 01:49:19

Ajoutez une video ou une image dans las div et vous pourrez les déplacer et les redimensionner en temps réel.

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 jhenaff le 06/09/2006 13:01:22

Pour l'agrandissement, le problème vient des bordures du div. Si elles font 15px par exemple, le div s'agrandit de 15 px. Si les bordures sont à 0 il n'y a plus de problème.
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.

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

salut !
bonne source !

pour info ça fonctionne avec opéra 9.0

Commentaire de mickaelpfr le 08/09/2006 10:17:12

très bonne source ( je n'ai regardé que le résultat ... ) mais bravo :)

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 thejam le 12/09/2006 13:03:13

Super! Ton script m'est très utile.
Vraiment un grand merci :)

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 econs le 14/09/2006 10:59:44 administrateur CS

Vraiment chouette. Bravo !

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

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

Commentaire de putch le 22/09/2006 16:53:59

re salut !

je voudrai savoir quoi modifier dans cette source pour n'avoir que le déplacement des blocs sans le redimensionnement.

Merci bien!

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 putch le 25/09/2006 17:50:10

yes impec !

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

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 wissweb le 01/10/2006 18:45:28

Salut bien.

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

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

Oui tout a fait.

Commentaire de jer666 le 10/10/2006 20:55:53

salut,

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

<div id="divTest" name="divTest" onMouseOver="fnOnMouseOver('divTest');" onMouseOut="fnOnMouseOver();">
<object type="application/x-shockwave-flash"  width="350" height="250"
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" />
</object></div>  

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.

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 jer666 le 11/10/2006 12:21:42

salut,

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

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 souliehenri le 01/12/2006 08:15:12

Bonjour,

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

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 fandembj le 22/03/2007 21:11:06

Bravo pour cette source géniale !
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.

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 jmeunier le 30/04/2007 12:26:50



très beau script ...
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

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 laurentg2003 le 04/11/2007 19:14:07 8/10

Bonjour,
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.

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

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 JPSI le 21/08/2008 15:18:38 8/10

Très utile, merci!
Pour CALITOM, supprime ces lignes et ça marchera:
if(vgCurrentPositionX==X_OTHER && vgCurrentPositionY==Y_OTHER)
{
vgCurrentX = vgMouseX-vgMouseDiffX;
vgCurrentY = vgMouseY-vgMouseDiffY;
}

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

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

:-)

Commentaire de machmachi le 14/05/2009 10:23:18

Merci pour ce script tres utile.
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

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 zen28 le 29/12/2009 11:04:10

Bonjour à tous très beau script j'essaie tout de même de l'adapter à mon souci mais en vain. Je vous explique j'ai un tableau en html et 2 colonnes soient 2 balises "TD" et j'aimerais que la bordure séparant les 2 colonnes soit déplaçable, et biensur que sa modifie le contenu de ces balises. Merci beaucoup et bonnes fêtes ^^

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.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

DRAG DROP JAVASCRIPT [ par webboy ] Bonjour,J'ai une page coup en 2 frame (bas & centre)Dans la frame bas g un tableau de 6 celulles comprenant chacune un div avec un idje voudrais drage drag and drop de fichier d'internet explorer vers une autre appli [ par poulp ] Je cherche a copier un fichier d'une page web sur mon disk dur ou dans une application simplement par l'intermédiaire du drag and drop. Par exemple j' [javascript] treview drag drop [ par ichevc ] Bonjour, je suis debutant en javascript,je cherche soit a recuperer soit de la documentation pour faire :un menu hierarchique (treeview) supportant le Drag Drop dans un formulaire ? [ par wasabi12 ] Bonjour &#224; tous !Est-il possible d'appliquer la fonction Drag &amp; Drop dans un formulaire. Je m'explique. Par exemple, j'ai une liste de personn quelqu'un sait-il faire un tel drag and drop ? [ par Thieums ] &nbsp;ouaip je suis un novice en flash et dans le cadre&nbsp; de mon projet&nbsp; tutor&#233; de fin dann&#233;e en iut service et r&#233;seau de comm Bug drag and drop sous IE ? [ par funkysim ] Bonjour, Je rencontre un problème avec du drag and drop d'iframe sur une autre iframe.C'est à dire que le déplacement de l'iframe fonctionne très ma Toolbox et Drag & Drop [ par Kendryl ] Bonjour,Etant novice en javascript et ne trouvant pas de tutorial sur google (je ne comprends que très mal l'anglais) , je vous demande conseils pour Drag and drop [ par ger91lou ] Voilà mon problème:A partir de l'exemple de quiz fourni avec macromedia flash 8 pro.A gauche j'ai 4 cases qui représentent 4 mots d'une phrase en déso Drag & Drop [ par 0mido0 ] Bonjour, Je vient d'utiliser le code source télécharge de site http://www.cyberdummy.co.uk/test/dd.php pour appliquer le drag &amp; drop à mon site, i Drag & Drop (avec cookies) [ par Sunmx ] Bonjour à tous,J'espère ne pas m'être trompé dans la catégorie de ma question enfin le choix est tellement difficile à faire xDComment peux t-on faire


Nos sponsors


Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,370 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales