0
\$\begingroup\$

The UI elements in question are under a world space rendered canvas.

I'm trying to place an item (UI image) into an item slot (UI image), so that it drops right in the middle of the image.

This code works when the item slot is on it's own.

public class ItemSlot : MonoBehaviour, IDropHandler
{
    public void OnDrop(PointerEventData eventData)
    {
        Debug.Log("Dropped item");
        if(eventData.pointerDrag != null)
        {
            eventData.pointerDrag.GetComponent<RectTransform>().anchoredPosition = GetComponent<RectTransform>().anchoredPosition;
        }
    }
}

When I place the item slot under another UI Image in hierarchy, the item drops in some offset from the center of item slot - why is that happening? How can I fix this?

enter image description here

[Edit]

Steps to reproduce:

  1. Add canvas

  2. Change canvas render mode to "World space"

  3. Set canvas RectTransform positions (x = 0, y = 0, z = 0)

  4. Item Slot: Add UI image under canvas. Change image RectTransform height and width to 1. Add script component to ItemSlot:

    using UnityEngine.EventSystems;
    
    public class ItemSlot : MonoBehaviour, IDropHandler
    {
        public void OnDrop(PointerEventData eventData)
        {
            Debug.Log("Dropped item");
            if(eventData.pointerDrag != null)
            {
                eventData.pointerDrag.GetComponent<RectTransform> 
                ().anchoredPosition = GetComponent<RectTransform> 
                ().anchoredPosition;
            }
        }
    }
    
  5. Item: Add UI image under canvas. Change image RectTransform height and width to 0.5. Add canvas group component. Add DragDrop script component:

    using UnityEngine.EventSystems;
    
    
    public class DragDrop : MonoBehaviour, IPointerDownHandler, 
    IBeginDragHandler, IEndDragHandler, IDragHandler
    {
        private RectTransform reactTranform;
        CanvasGroup m_CanvasGroup;
    
        private void Awake() {
            reactTranform = GetComponent<RectTransform>();
            m_CanvasGroup = GetComponent<CanvasGroup>();
        }
    
        public void OnPointerDown(PointerEventData eventData)
        {
    
        }
    
        public void OnBeginDrag(PointerEventData eventData)
        {
            m_CanvasGroup.blocksRaycasts = false;
        }
    
        public void OnDrag(PointerEventData eventData)
        {
            reactTranform.anchoredPosition = 
            Camera.main.ScreenToWorldPoint(Input.mousePosition);
        }
    
        public void OnEndDrag(PointerEventData eventData)
        {
            m_CanvasGroup.blocksRaycasts = true;
        }
    }
    
  6. Hit "play" - now can drag and drop item in the middle of item slot.

  7. Create UI image - "Parent of slot" Change image RectTransform height and width to 3 Change image RectTransform positions (x = 0, y = 3, z = 0)

  8. Drag Item Slot to be child of "Parent of slot"

  9. Hit "play" - now the item isn't placed in the middle of Item Slot, it's placed at some offset

\$\endgroup\$
2
  • \$\begingroup\$ We'll need a Minimal Complete Verifiable Example: every step of scene/asset setup instructions and every line of code needed to reproduce this problem in a new, empty project. Please edit your question to contain this level of detail. \$\endgroup\$
    – DMGregory
    Mar 1 at 19:06
  • \$\begingroup\$ @DMGregory added - reproduced on a clean project \$\endgroup\$
    – manish ma
    Mar 1 at 19:47

0

You must log in to answer this question.

Browse other questions tagged .