Question by Kaijobu · Dec 27, 2017 at 12:50 PM · c#scrollview dragging toggle button

Selection problem of Toggles/Buttons in a draggable ScrollRect

Hello all,

I've searched for a while but haven't found a solution for me.

I am creating a mobile application with 2D elements on a canvas.

On some panels I will have a ScrollRect with dynamic content, meaning the amount of items in there varies. I already managed to scale the content size with the content size fitter. What I now wanted to achieve is the possibility to drag this ScrollRect even if I touch a Button or Toggle.

I achieved this also by attaching a script which implements IPointerDownHandler, IPointerUpHandler, IBeginDragHandler, IDragHandler, IEndDragHandler.

I have also implemented the ability to press or hold either Toggles or Buttons. When I click my Toggles, they work as intended and change their color, when they are turned on.

The problem I am facing is:

Whenever I want to drag the ScrollRect view, the Selectable Object keeps getting selected when I re-enter the gameobject. With Buttons it was acceptable, but using toggles introduces the issue of changing the value of isOn, when I release the touch after a drag on this same Toggle. What I want is:

The moment I begin to drag the content area, I want to deselect the pressed item and simply continue with dragging, regardless where I stop. If I release the touch outside of the starting element, nothing is changed like it should be.

I hope the following images make this more understandable. The mouse pointer's position is shown with the star symbol.

Beginning to hold down over a Toggle. alt text

Beginning to drag. alt text

Moving the mouse outside of the selected object. alt text

Reentering the Toggle. (This should react like any other Toggle being hovered over; not being highlighted anymore since beginning of the drag.) alt text

Releasing the touch/press over this Toggle. (Should not happen!) alt text

The code of this toggle is basically this:

 [RequireComponent(typeof(Toggle))]
 public class HoldButtonOrderTableItem : MonoBehaviour, IPointerDownHandler, IPointerUpHandler, IBeginDragHandler, IDragHandler, IEndDragHandler
 {
     private Toggle thisToggle;
 
     private bool isDown;
     private bool isDrag;
  
     private float downTime;
     private ScrollRect parentScrollRect;
  
     [...]
 
     void Update()
     {
         if (!isDown) return;
         if (!isDrag && Time.realtimeSinceStartup - downTime > 1f)
         {
             HandleLongTap();
         }
     }
 
     private void HandleLongTap()
     {
         print("Handle Long Tap");
         isDown = false;
         // some functionality ...
     }
 
     private void HandleShortTap()
     {
         Debug.Log("Handle Short Tap");
         // some functionality ...
     }
 
     public void OnPointerDown(PointerEventData eventData)
     {
         Debug.Log("Pointer Down!");
 
         isDrag = false;
         isDown = true;
         downTime = Time.realtimeSinceStartup;
     }
 
     public void OnPointerUp(PointerEventData eventData)
     {
         Debug.Log("Pointer Up!");
 
         isDown = false;
 
         if (!isDrag && Time.realtimeSinceStartup - downTime <= 1f)
         {
             HandleShortTap();
         }
     }
 
     public void OnBeginDrag(PointerEventData eventData)
     {
         Debug.Log("Begin Drag!");
         isDrag = true;
 
         // thisToggle.OnPointerExit(eventData);  <-- I tried different things here, nothing worked yet.
 
         parentScrollRect.OnBeginDrag(eventData);
     }
 
     public void OnDrag(PointerEventData eventData)
     {
         parentScrollRect.OnDrag(eventData);
     }
 
     public void OnEndDrag(PointerEventData eventData)
     {
         Debug.Log("End Drag.");
 
         parentScrollRect.OnEndDrag(eventData);
     }
 }

The received console output until the last image is this one, which shows it doesn't call any of my methods (HandleLong/ShortTap). So the Toggle is using the OnPointerUp Event and changes its ON-state. alt text