I have a 3D UI where I am using the ScrollRect to detect user touch drag, then I bring in UI elements such as buttons that partially overlap with the ScrollRect. These new buttons are instantiated from a prefab and they have 3D trajectory from where they fly into the view. So it is not an option for me to have the buttons as child of the ScrollRect.
How can I utilize the OnDrag, OnScroll etc events to let user press the toggle but also drag on top of the toggle. Currently I only can make it work with either scrolling or pressing button but not between OnClick vs OnDrag. OnClick to be only taken into account for the toggle and OnDrag for the ScrollRect. I have just started to work with the new UI system so I’m rather ignorant on what is the right way. Apologies for that
I attached example project to show the problem. When you drag on top of the toggle, the scrollrect is not moving. And if I change the layer order so that scrollrect is on top, then the toggle button wont work.
As an ecxample of what I tried to do is on Drag disable the toggle interactable and then try to make the ScrollRect as if it was clicked. scroll it and then EndDrag again make the toggle interactable. But I just could not make it work properly. Apparently it is really not the right way to go.
I didn’t download your source, but judging from description you can have button container in scrollrect, and put your buttons within that container. Animating them from off-screen will work, since only the parent container will be managed by scrollrect. If you have hard times achieving this via native animation, you can surly achieve this with some tweening libs. Hope this helps.
Thank you for the swift reply Raimis. Unfortuantely I am not familiar with the containers. Is it something coming from the old UI system? I will go dig into them a bit to understand it.
If it is by any means possible to do it through the event system that would be best for my primitive coding capabilities. But I suspect it is not possible to do that way. Somehow this mapping between the events of 2 separated objects seems tricky. How to distingusih beforehand if the drag was made and then decide if the SrollRect should react to it or if the button should.
I was also trying to study the unity own example projects and found that maybe I need to use the script similiar to the one used in drag menu items. So that when I actually drag on the button, not the scrollrect, I need to make some new black magic code to move the the ScrollRect manually, and just handle it separately. This sounds very scary. I hope there is more straightforward way to it.
private void SetDraggedPosition(PointerEventData data)
{
if (dragOnSurfaces && data.pointerEnter != null && data.pointerEnter.transform as RectTransform != null)
m_DraggingPlane = data.pointerEnter.transform as RectTransform;
var rt = m_DraggingIcon.GetComponent<RectTransform>();
Vector3 globalMousePos;
if (RectTransformUtility.ScreenPointToWorldPointInRectangle(m_DraggingPlane, data.position, data.pressEventCamera, out globalMousePos))
{
rt.position = globalMousePos;
rt.rotation = m_DraggingPlane.rotation;
}
}
By container I meant GO who’s sole purpose is to be placeholder. Would you achieve the desired result if buttons were in scrollrect except the animation part? If so, simply add these buttons to extra game object before placing in the scrollrect. You can animate buttons within that game object (so that they appear from off-screen without affecting scrollrects behavior).
I tried to add them to the scroll rect without much success. Still cant find a way how to avoid the button click on drag and jsut manipulate the scrollrect.
Any advice on the example scene would be much appreciated.
I suspect that it could be done somehow with the inbuilt UI events. But it is just beyond me how it is done.
