koobas.hobune.stream
How to move UI image between panels
Hello,
I have trouble with changing parents on UI image, when I drag my image to another panel and drop it there, it changes image parent, but when is it vice versa, It doesn't work.
There is my code for UI Image
public class DragIcons : MonoBehaviour, IDragHandler, IEndDragHandler
{
Vector3 startposition;
public Transform transformParent = null;
//public GameObject itemBeingDraged;
public void OnBeginDrag(PointerEventData eventData)
{
startposition = transform.position;
transformParent = transform.parent;
transform.SetParent(transform.parent);
GetComponent<CanvasGroup>().blocksRaycasts = false;
}
public void OnDrag(PointerEventData eventData)
{
transform.position += (Vector3)eventData.delta;
}
public void OnEndDrag(PointerEventData eventData)
{
transform.localPosition = transform.localPosition;
transform.SetParent(transformParent);
GetComponent<CanvasGroup>().blocksRaycasts = true;
}
}
and this is for my second panel
public class PanelDropzone : MonoBehaviour, IDropHandler
{
public void OnDrop(PointerEventData eventData)
{
DragIcons di = eventData.pointerDrag.GetComponent<DragIcons>();
if(di != null)
{
di.transformParent = transform;
}
}
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
}
}
When I'm dragging my UI image from panel1 to panel2 it's okay, it change parent to panel2. But when I try drag it back to panel1, the parent of image is still set for panel2 and not for panel1
I watched many tutorials on YT and I was reading throught internet and everywhere is always tutorial like on Inventory or something like this or they are using slots etc. But I don't understand how to do it like this. Thank you.
It's hard for me to say without seeing your project but I THIN$$anonymous$$ the issue is that the OnDrop method in your PanelDropzone script isn't be called the second time. Your code looks fine, I don't see anything that would stop the parent from being changed so I'm guessing something is stopping the drop event from firing.
$$anonymous$$y best guess is that Panel2 is before Panel1 in the hierarchy which means that when the dragged item is dragged back to original panel the item is now under the panel so the drop code never fires. The workaround here would be something like this:
public Transform canvasRoot;
public void OnBeginDrag(PointerEventData eventData)
{
startposition = transform.position;
transformParent = transform.parent;
//Updates here
transform.SetParent(canvasRoot);
transform.SetAsLastSibling();
GetComponent<CanvasGroup>().blocksRaycasts = false;
}
Where canvas root is assigned to your canvas. This will basically make sure the item you're dragging is always on top of other elements in the canvas. Some additional logic may be needed to set the parent back to transformParent if the item wasn't dragged onto a drop handler.
If this doesn't work, check that the original panel has the PanelDropzone script and check that the panel is a raycast target too.
Let me know if it works or if you've got any other questions.
