Вопрос по координатам мыши в JavaScript

Мне нужно сделать пазл в браузере из 6 изображений в форме квадрата.
Затем я сделал так, чтобы картинку появлялись в случайных местах. Внутри тега script есть переменная count, которая увеличивается на единицу при нажатии на картинку. То есть если count % 2 == 1, то это значит, что картинка уже была "выделена" и сейчас нужно отменить возможность ее перемещения(то есть удалить EventListener). Иначе же происходит добавление EventListener, который должен перемещать картинку при движении мыши поверх этой картинки. И затем count увеличивается, чтобы показать, что картинка "выделена". Событие mousemove я выбрал, так как перемещение должно происходить вместе с курсором, который на момент вызова foo будет над картинкой.
Я хочу сделать так, чтобы при перемещении изображения, его координаты относительно координат курсора не менялись. То есть чтобы offset оставался неизменным. Но почему-то изображение прыгает непонятным для меня образом. Ведь clientX это расстояние в пикселях от левой стороны окна бразуера до курсора, а offsetX, в данном случае, это расстояние от левой стороны изображения до курсора. То есть присвоив разность этих параметров item.style .left, по сути offset должен оставаться одинаковым. Или я что-то не понимаю?

Содержимое тега body:
<table border="1">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<img src="./1part.png" id="1_pic" onclick="foo(1)">
<img src="./2part.png" id="2_pic" onclick="foo(2)">
<img src="./3part.png" id="3_pic" onclick="foo(3)">
<img src="./4part.png" id="4_pic" onclick="foo(4)">
<img src="./5part.png" id="5_pic" onclick="foo(5)">
<img src="./6part.png" id="6_pic" onclick="foo(6)">
<script src="./script.js"></script>

Содержимое тега script.js:
for(let i = 1; i < 7; i++) {
document.getElementById(i+"_pic").style.left = (Math.random(0,1000) * 300) + "px";
document.getElementById(i+"_pic"). style.top = (Math.random(0,600) * 300) + "px";
}

var q;
var count = 0;

function foo(i) {
let item = document.getElementById(i + "_pic");
if(count % 2 == 1) {
item.removeEventListener("mousemove", q);
count++;
return;
}
item.addEventListener("mousemove", q = function(event) {
item.style .left = event.clientX - 8 + "px";
item.style.top = event.clientY - 8 + "px";
});
count++;
}
Содержимое style.css:
img {
position: relative;
}
td {
width: 215px;
height: 215px;
}