Search Unity

How To? : Draggable Icons in Scrollable List

Discussion in 'UGUI & TextMesh Pro' started by Paden, Mar 13, 2018.

  1. Paden

    Paden

    Joined:
    Sep 13, 2013
    Posts:
    13
    Ok so bare with me here.

    I have a ScrollRect that contains a list of UI GameObjects (Image + Text). These GameObjects, when clicked on (OnPointerDown), instantiate a copy of themselves and follow the cursor (i.e. they are draggable). I need these objects to remain draggable, however, I also want to be able to drag in order to scroll through the list.

    So, my idea was to create a delay that only Instantiates the copy after, say, 0.5 seconds (and allows you to scroll if that is your intended behaviour). To do this, I have a timer that checks to make sure I have held down the input for 0.5 seconds and I have a check to make sure I haven't moved the cursor (too much, within 5 pixels). If the 0.5 seconds passes and I didn't move the cursor too much, then the copy is instantiated and begins to follow the cursor (however, the list continues to scroll).

    The GameObjects in the ScrollRect implement IPointerDownHandler and after the 0.5 seconds of the pointer being held down, another script is added to the GameObject that takes care of instantiating the copy and forces said object to follow the cursor (in Update()). When Input.GetMouseButtonDown(0) returns false, the object is destroyed.

    Now, my problem is that I need to be able to drop the GameObject being dragged into another list (that has an Image component... if this matters) so that it is then added as a child to that transform. I have tried using the drag handlers, combos of the drag handlers and pointer handlers, and some other weird methods, but everything seem to give me issues. My question is: what is the simplest way of implementing this (after x time a GameObject is instantiated, follows the cursor until the user lets go, then if the object is overtop of another SPECIFIC object, that object is notified)?

    I have tried many combinations of the drag handlers and pointer handlers but I'm starting to go crazy and starting to forget which combinations I have tried and which ones I haven't. Thanks in advance.
     
  2. Beks_Omega

    Beks_Omega

    Joined:
    Jun 7, 2017
    Posts:
    72
    I know there's this component (scroll down for a video example) you could use, that seems to do what you're looking for. Do you think that could work?
     
  3. Paden

    Paden

    Joined:
    Sep 13, 2013
    Posts:
    13
    Hmmm... looks like a useful system but I have a few concerns.

    See, the main issue with simply using the IDraggableHandler is that once the pointer is down, and I move one pixel in any direction, OnDrag is called. This prevents me from being able to scroll through the ScrollRect when dragging on one of the icons (I need to drag the background for it to scroll). That is why I want the delay.
     
  4. Beks_Omega

    Beks_Omega

    Joined:
    Jun 7, 2017
    Posts:
    72
    Ok before I try to give any more suggestions could you clarify your problem a bit for me? What exactly is working and what exactly is not?

    Is the delay working? Is the delay interfering w/ the scroll or vice versa? Is the mouse follow working? Is the dropping working?

    If I have a few more details hopefully I can give you a better solution :D
     
  5. Paden

    Paden

    Joined:
    Sep 13, 2013
    Posts:
    13
    Hey everything was working up to the drop. I ended up just doing a ray cast straight into the UI when GetMouseButton(0) returns false to check and see if the other list was under the cursor. This works fine but thought I would be able to use the event systems.

    Thanks for looking into it.
     
    Beks_Omega likes this.