如何使用位置检测在Javascript（或其他web语言）中进行拖放

我已经在这个设计上工作了相当长的一段时间，试图制作一个拖放系统，在那里我可以检测高尔夫球在哪里。 我想检测它在哪个圆/正方形中，也要检测它在什么“坐标”上。 我用Unity&Gamemaker在几个不同的系统中制作了这个，我用x&y系统做了，检测它的长度，但问题是，比如三星S3有1920 y和1080 x，但分辨率较低的小型手机有不同的x和y，所以我开始计算屏幕的宽度和高度，基本上是想找出百分比。但是，因为我不想破坏图像的比例，这变得非常困难和不准确

我正试图重做这一点，但不是以更好的方式，我还没有决定使用哪种语言，但因为我想拥有一个web应用程序和android&ios，我在ASP.NEt应用程序中使用HTML+javascript，以便在android&ios交付中使用Xamarin

对于图像：

在这里我试着做一个“果岭”，这是你试着落地的地方。

这是球：

对于我所尝试的，您可以在这里找到：

（找到此示例，稍作修改）

JQUERY

$("#snaptarget1").css("border-radius", "20%");
    $("#snaptarget2").css("border-radius", "30%");
    $("#snaptarget3").css("border-radius", "40%");

HTML

Android有拖放功能：我注意到了Android的功能，但我也想将其发布到ios上，虽然我相信HTML5也有，但他们没有检测到它的位置，这是主要功能之一

<div id="snaptarget1" class="bal-oszlop tapad bal"></div>
  <div id="snaptarget2" class="kozepso-oszlop tapad bal"></div>
  <div id="snaptarget3" class="jobb-oszlop tapad jobb"></div>