In this blog, let's use ugui to implement the drag and drop function of pictures.

Speaking of dragging,That must be inseparable from coordinates,The coordinates of ugui are a bit different,It has two coordinates,One is screen coordinates,The other is the coordinates of ui in the canvas (temporarily called ugui coordinates.) These two coordinates are different.So drag and drop need to be converted.Because the mouse movement is screen coordinates,And the movement of ui is the guii coordinate. Conversion method:

recttransformutility.screenpointtolocalpointinrectangle (...);This method can convert screen coordinates to ugui coordinates. As for the differences between screen coordinates and ugui coordinates, transformations, etc., I won't talk about them.Because I'm also confused,I'm afraid I said you close the browser directly.

Here we just need to know that the coordinates of ui and the coordinates of the mouse are different,The movement between them needs to be converted.

Since conversion is needed,How to use it.So here are some official ugui listening events:

(I wo n’t offer ugly translations,English is still a bit scum.)

To add the above listener event to the control,There are three ways:

1. Write a class,Implement the above interface (which one is used, which one is implemented) and add this script to the space.

2.Add eventtrigger component

Add the listener i want to add

Then add a method just like adding a listener to buttong.

3, the program is dynamically added

Here I use the first method,Let me talk about the latter two if you have a chance.

Now we are officially starting to implement the function.Create a new 2d project. Add an image to the scene (not necessarily an image,Other controls will do), then add script to the image,Named mydrag, edited:

using unityengine;
using unityengine.eventsystems;
using system.collections;
using system;
//Add some interfaces to the listener event to implement
public class mydrag:monobehaviour, ipointerdownhandler, idraghandler, ipointeruphandler, ienddraghandler, ipointerenterhandler, ipointerexithandler {
 public recttransform canvas;//Get the coordinates of canvas
 private recttransform imgrect;//Get the gui coordinate of the picture
 vector2 offset=new vector3 ();//Used to get the difference between the mouse and the image
 vector3 imgreducescale=new vector3 (0.8f, 0.8f, 1);//Set the image scale
 vector3 imgnormalscale=new vector3 (1, 1, 1);//normal size
 //use this for initialization
 void start () {
 //Called when the mouse is pressed Interface corresponding to ipointerdownhandler
 public void onpointerdown (pointereventdata eventdata)
 vector2 mousedown=eventdata.position;//Record screen coordinates when the mouse is pressed
 vector2 mouseuguipos=new vector2 ();//Define a guii coordinate returned by the receiver
 //recttransformutility.screenpointtolocalpointinrectangle ():convert screen coordinates to ugui coordinates
 //canvas:to which object the coordinates are to be converted,Here the img parent class is canvas, we use canvas
 //eventdata.entereventcamera:which camera this event was executed by
 //out mouseuguipos:return the converted ugui coordinates
 //isrect:method returns a bool value to determine whether the point the mouse is pressed on is the object to be converted
 bool isrect=recttransformutility.screenpointtolocalpointinrectangle (canvas, mousedown, eventdata.entereventcamera, out mouseuguipos);
 if (isrect) //if in
 //Calculate the difference between the image center and the mouse point
 //Called when the mouse is dragged Corresponding interface idraghandler
 public void ondrag (pointereventdata eventdata)
 vector2 mousedrag=eventdata.position;//Screen coordinates when the mouse is dragged
 vector2 uguipos=new vector2 ();//Used to receive transformed drag coordinates
 //Same as above
 bool isrect=recttransformutility.screenpointtolocalpointinrectangle (canvas, mousedrag, eventdata.entereventcamera, out uguipos);
 if (isrect)
 //Set the ugui coordinates of the picture and the ugui coordinates of the mouse to remain unchanged
 imgrect.anchoredposition=offset + uguipos;
 //Called when the mouse is raised. Corresponding interface ipointeruphandler
 public void onpointerup (pointereventdata eventdata)
 //Called when the mouse finishes dragging the corresponding interface ienddraghandler
 public void onenddrag (pointereventdata eventdata)
 //Called when the mouse enters the picture. The corresponding interface ipointerenterhandler
 public void onpointerenter (pointereventdata eventdata)
 imgrect.localscale=imgreducescale;//Reduce the image
 //Called when the mouse exits the corresponding interface ipointerexithandler
 public void onpointerexit (pointereventdata eventdata)
 imgrect.localscale=imgnormalscale;//Reply to image

Now you have a simple drag and drop function.

  • Previous Explain the problem of Vuex action passing multiple parameters
  • Next Summary of regular expression usage in Python