Drag and Drop d une image

Rédigé par spheris Aucun commentaire
Classé dans : Tutoriels, picturebox, gambas 2 Mots clés : drag, drop, image
electric.jpg

Aujourd 'hui, nous allons étudier plus en détail la fonction DRAG and DROP d 'une image de GAMBAS.
nous allons creer une petite application avec une feuille Fmain, une Drawarea1 et une picturebox.
L 'idée sera de pouvoir déplacer notre image n 'importe ou sur la feuille.

creeons un projet et nommez le drag_easy
Les propriétés de Fmain sont :
Maximized = TRUE

creeons une drawarea1
les proprietes sont :
drawarea1.X = 0
drawarea.y = 0

creeons la fonction Fmain_resize()
et ecrivons ce code :

PUBLIC SUB Fmain_resize()
drawarea1.height = ME.height
drawarea1.width = ME.width
END

nous demandons lors d 'une Maximisation soit agrandissement de la fenêtre de redimensionner la drawarea1 a son maximum par la commande : drawarea1.height = ME.height en verticale et drawarea1.width = ME.width en horizontale.

maintenant dans la drawarea1 creeons une pictureBox1 et insserons y une image (l 'image de l 'exemple)

tout est prêt&nbsp !

realisons notre DRAG and DROP :

PREMIERE ETAPE LE DRAG

le drag va être réalisé lorsque nous cliquerons sur la picturebox et que nous la bougerons.
donc voici la fonction :
PUBLIC SUB PictureBox1_mousedrag()


IF Mouse.Left THEN
&nbsp&nbsp&nbsp Drag.Icon = LAST.Picture
&nbsp&nbsp&nbsp LAST.Drag(LAST.Picture.Image)

&nbsp ENDIF

END

decortiquons le code :

IF Mouse.Left THEN est une boucle de test qui veut dire La souris prendra l 'objet à déplacer à gauche.
N 'essayez pas mouse.right ou mouse.middle cela ne marche pas.
nous dirons que c 'est une phrase a ajouter systematiquement pour faire un drag.

Drag.Icon = LAST.Picture veut dire simplement que l 'icone au moment du deplacement sera l 'objet déplacé.
pour essayer mettez cette phrase en commentaire, et vous verrez qu 'au&nbsp moment du déplacement, le curseur reste ...une simple fleche !

LAST.Drag(LAST.Picture.Image)
voila la fonction DRAG par excellence, c 'est ce bout de code qui autorise le deplacement de l 'objet
cela veut dire le dernier Drag(deplacement) était une image à déplacer

endif on sort de la boucle

entre Endif et END nous pourrions ajouter une boite à message du style :
message.info( j 'ai déplacé l 'élément! )
et nous verrons qu 'à la fin du DRAG au moment du relachement de la souris la fenêtre s 'affiche.

DEUXIEME ETAPE LE DROP

dans notre exemple qui va recevoir le DROP ? c 'est notre drawarea1
N 'oublions pas au début nous voulions déplacer une picturebox1 dans toute la drawarea1

Mettons dans la propriété DROP de la Drawarea1 à TRUE

Maintenant creeons une fonction qui va recevoir le DROP :

PUBLIC SUB DrawingArea1_Drop()
PictureBox3.X = Drag.X
PictureBox3.Y = Drag.Y

END

Décortiquons le code

PictureBox3.X = Drag.X
nous demandons simplement d 'ajuster les coordonnées de la picturebox1 en X à la valeur de la fin du DRAG
PictureBox3.Y = Drag.Y
Idem pour la verticale avec Y

Sur vb a la firme Redmond, au moment du DRAG la picturebox1 originale disparait, suit le curseur et apparait au Drop. Nous pouvons faire pareil.
Dans la fonction DRAG precedente nous ajoutons simplement :
PictureBox1.Visible = FALSE

voyons le code entier :
PUBLIC SUB PictureBox1_MouseDrag()
IF Mouse.Left THEN
Drag.Icon = LAST.Picture
PictureBox1.Visible = FALSE
LAST.Drag(LAST.Picture.Image)
ENDIF
PictureBox3.Visible = TRUE
END

CONCLUSION :
un drag and drop a trois etapes essentielles:
une fonction mousedrag de l 'emetteur du DRAG avec la boucle IF Mouse.Left THEN...ENDIF
la propriété du récepteur DROP est à TRUE
une fonction DROP du récepteur qui reçoit le drag (coordonnées,image,texte,etc...)

Voici les sources de cet exemple.
Bonne journee à tous.