This Tech Tip reproduces the behavior described in Using the On Timer form event to implement dragging SVG images in a more elegant and easy to use fashion. The old Tech Tip is still functional, but this new version will generally be more useful.

After displaying an SVG image in a picture variable on a form, one of the biggest advantages of SVG is that the image can be interactive. For more information on implementing interactive images check the Responding to a User Click on an SVG Image Tech Tip. One form of interactivity is the ability to drag one object in your SVG image within the image. The strategy for dragging an object in your SVG image can be handled completely from the picture variable's object method. It works in the following manner:

• In case of the On Clicked form event use the SVG Find element ID by coordinates command to ensure that the desired object was clicked on.


• If it is the correct object, set a Boolean flag to be referenced during the On Mouse Move event.


• Save the ID attribute of the clicked element as well.


• In case of the On Mouse Move event use the GET MOUSE command to see if the mouse button is down.


• If it is down, test the flag that was set in the On Clicked event.


• If the mouse button is down, and the flag has been set, then the user is trying to drag the desired object.


• Use the 4D SVG command SVG_Find_ID to return the reference to the dragged element based on the ID attribute that was saved as part of On Clicked.


• Then use the SVG_SET_ATTRIBUTES command to reset the x and y coordinates based on the current MouseX and MouseY system variables.


• Finally re-export the picture from its SVG source to the picture variables on screen.


• If the mouse button is not down then re-set the Boolean flag to False. This means the user has un-clicked the object selected.

The following code shows an example of this strategy. It is used to move a circle element around an image based on the user dragging inside the circle:

Case of   : (Form event=On Clicked )     C_LONGINT($myx;$myy)     $myx:=MouseX     $myy:=MouseY     $ref:=SVG Find element ID by coordinates(picvar;$myx;$myy)     If ($ref="mycircle")       testflag:=True       myid:=$ref     End if   : (Form event=On Mouse Move )     C_LONGINT($x;$y;$button)     GET MOUSE($x;$y;$button)     If ($button=1)       C_TEXT($ref)       If (testflag=True)         $realref:=SVG_Find_ID (svgref;myid)         SVG_SET_ATTRIBUTES ($realref;"cx";String(MouseX);"cy";String(MouseY))         picvar:=SVG_Export_to_picture (svgref)       End if     Else       testflag:=False     End if End case