اول نیاز داریم که روش قرارگیری توپ را انتخاب کنیم.

نمی‌توانیم از position:fixed به این منظور استفاده کنیم. چون اسکرول کردن صفحه باید توپ را در زمین جابجا کند.

پس باید از position:absolute استفاده کنیم و برای اینکه از موقعیت توپ مطمئن شویم، روش قرارگیری field را نیز تنظیم می‌کنیم.

در این صورت، توپ نسبت به زمین قرار گرفته می‌شود:

#field {
  width: 200px;
  height: 150px;
  position: relative;
}

#ball {
  position: absolute;
  left: 0; /* نسبت به نزدیکترین والدی که موقعیت آن تنظیم شده (field) */
  top: 0;
  transition: 1s all; /* انیمیشن‌های CSS برای چپ/بالا، انگار توپ پرتاب شده */
}

حال باید مقدارهای درستی به ball.style.left/top بدهیم. این مقدار نسبت به زمین خواهد بود.

مانند این تصویر:

ما event.clientX/clientY را داریم، مختصات اشاره‌گر موس نسبت به پنجره.

برای اینکه مقدار left مختصات اشاره‌گر موس در زمان کلیک را نسبت به زمین بگیریم، باید چپ زمین و عرض حاشیه را از هم کم کنیم.

let left = event.clientX - fieldCoords.left - field.clientLeft;

معمولا، ball.style.left به معنی “حاشیه چپ عنصر” (توپ) است. پس اگر که به left مقدار دهیم، پس گوشیه توپ، و نه وسط آن زیر موس قرار می‌گیرد.

باید که توپ را به اندازه نصف طولش به چپ، و به اندازه نصف ارتفاع آن به بالا ببریم تا وسط قرار گیرد.

پس مقدار نهایی left به صورت زیر است:

let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;

مختصات عمودی نیز با همین منطق محاسبه می‌شود.

لطفا توجه کنید که طول/ارتفاع توب باید در زمانی که به ball.offsetWidth معلوم باشد. پس باید در HTML یا CSS آنها را مقدار دهی کنیم.

باز کردن راه‌حل درون sandbox.