Create magnetic points on screen


#1

I want to create 3 views on the screen say view1, view2 and view3 with random locations (x, y). There should be one image which is initially located at the middle of the screen. Upon dragging the image on the screen if the image cross or gets near to the any of the predefined views, the particular view should be highlighted.

Please help to find the best approach to achieve the above. Thanks in advance.


#2

Here are few resources you can learn about drag and drop

http://www.nativescriptsnacks.com/snippets/2017/04/18/drag-drop.html

You can always get position of an element using one of these methods .getLocationInWindow / .getLocationOnScreen / .getLocationRelativeTo, so you know when it is nearer and highlight them.


#3

On pan event we can able to get the current position of the image but each movement if we try to calculate the distance between image and views in a loop(3 view for example).

Whether it affects UI rendering and performance of app?


#4

You should be fine, I have some serious stuff happening on PAN in my app (like things MOVING with the pan, checking values\etc)… no noticeable perf hit at all, obviously though if your code is inefficient then it’ll hit ya.