# Drag and drop the right piece in place **URL:** \ **Category:** UI\ **Tags:** drag-and-drop, unreal-engine, puzzle, Widget, Blueprint, question\ **Created:** [August 24, 2021, 2:10am UTC](https://forums.unrealengine.com/t/drag-and-drop-the-right-piece-in-place/487904 "2021-08-24T02:10:04Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Cat120700](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Cat120700](https://forums.unrealengine.com/u/Cat120700)\ **Post date:** [August 24, 2021, 2:10am UTC](https://forums.unrealengine.com/t/drag-and-drop-the-right-piece-in-place/487904/1 "2021-08-24T02:10:04Z")
I want to make this “drag and drop the right piece in place” puzzle but I don’t know how to set up the blueprint in the widget interface (UI) since I want to achieve this game in a popup style. Anyone can help me with how to set collision in WI and when the piece hits the collision it snaps in the picture? ![347090-find-the-right-piece-jigsaw-puzzle-game-for-childr.jpeg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/8/4/7/8479df633e56b4a105d02093e53ade4184a1ae54.jpeg) ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [August 24, 2021, 7:31am UTC](https://forums.unrealengine.com/t/drag-and-drop-the-right-piece-in-place/487904/2 "2021-08-24T07:31:42Z")
![347096-screenshot-4.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/c/1/e/c1e573b4d2c653e101e13870a347d1f748ec701b.png) - the whole thing should sit in a Canvas - create a _UserWidget_ anchor (a border will do), ensure it’s transparent but _Visible_ - place 2 anchors for each missing piece - when the drag OP is taking place, keep track of how many and which anchors drag enters & leaves - if you detect 2 simultaneously, we’re hovering over the correct spot - the anchors can be made smaller / larger to control difficulty / required accuracy - once we have 2 anchors dragged over & drag is cancelled (or perhaps just detecting 2 anchors is enough), snap the dragged widget to the centre of the anchor in the upper left corner ---
**Author:** ![BigBadMamouth](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@BigBadMamouth](https://forums.unrealengine.com/u/BigBadMamouth)\ **Post date:** [August 24, 2021, 8:47am UTC](https://forums.unrealengine.com/t/drag-and-drop-the-right-piece-in-place/487904/3 "2021-08-24T08:47:56Z")
When OnDragDetected is triggered in UserWidget (and Operation created) You can check on any element (image) OnDragEnter, OnDragExit and OnDragOver. Then use Operation pin to get Target-\>Drag Visual and Target-\>Drag Payload (Variables-\>Drag and Drop-\>Get Visual or Get Payload). You define what is Visual and what is Payload widget when creating DragDrop Widget and use those in OnDrop. ---
**Author:** ![Cat120700](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Cat120700](https://forums.unrealengine.com/u/Cat120700)\ **Post date:** [August 24, 2021, 8:47am UTC](https://forums.unrealengine.com/t/drag-and-drop-the-right-piece-in-place/487904/4 "2021-08-24T08:47:56Z")
Can you show me how to set up the blueprints? I am new to Unreal so I’m quite lost… ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [August 24, 2021, 8:57am UTC](https://forums.unrealengine.com/t/drag-and-drop-the-right-piece-in-place/487904/5 "2021-08-24T08:57:35Z")
Which part? The whole thing is a couple of hours of work… that’s for the base interaction, significantly more for any additional features. Longer if I need to to prettify, take screenshots, and even longer if I need to comment the script so you know what’s going on. How far have you gotten with this? - prepare the board with slots - prepare the draggable pieces - prepare the anchors - implement the drag & drop One step at a time. > I am new to Unreal so I’m quite lost… May I suggest you cover some basic tuts first, especially drag & drop and the fundamentals of how widgets work. * * * And if you need it done by someone else, there’s also this section: > **[Job Offerings](https://forums.unrealengine.com/c/community/got-skills-looking-for-talent/job-offerings/76)** > > \Need some someone talented to join your team? Post your open positions here!\ It will cost you a penny, ofc. ---
**Author:** ![BigBadMamouth](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@BigBadMamouth](https://forums.unrealengine.com/u/BigBadMamouth)\ **Post date:** [August 24, 2021, 9:27am UTC](https://forums.unrealengine.com/t/drag-and-drop-the-right-piece-in-place/487904/6 "2021-08-24T09:27:12Z")
https://www.youtube.com/embed/WfF3fb0WaoY?feature=oembed&wmode=opaque&list=PLSlkDq2rO1t71xqik4JyNxY3lKCGhb8St