Как реализовать корректное перетаскивание элемента?

Question

[Степан]

Есть сетка их элементов. 2 из них можно перетаскивать на различные ячейки сетки. Перетаскивание реализовано для телефона, но работает оно не очень корректно.Когда я хватаю элемент за разные места,то он мгновенно перемещается лишь к одному углу,и за этот угол я его и перемещаю.Но правильно было бы,если бы элемент перемещался именно за то место,за которое я его схватил.


Код на CodePen: https://codepen.io/stepashka20/pen/mdmKeoq

Скорее всего надо исправить условие:

drag.style.top = `${touch.pageY - (wrapper.offsetTop) - (drag.offsetWidth /2)}px`;
drag.style.left = `${touch.pageX - (wrapper.offsetLeft) - (drag.offsetHeight /2)}px`;

Но не могу понять,как правильно написать выражение,используя координаты

Answer 1

[I Phoenix I]

Как вариант, можно попробовать использовать эту библиотеку.

Answer 2

[robprane]

Для того, чтобы пертаскивать объекты за ту координату, где они были взяты, надо эту координату сначала получить в touchstart.

И еще у вас перепутаны местами drag.offsetWidth и drag.offsetHeight.