I have implemented drag and drop with html/JavaScript. It works well with mouse drag but having issue with touch screen. while dragging item on touch screen it's position is not correct either it goes up or down from the touch point. Thanks in advance!
var _left = _touch.clientX;
var _top = _touch.clientY;
_touch.target.style.left = _left + 'px';
_touch.target.style.top = _top + 'px';
The issue has been resolved. The fix is as below:
var droppable = document.elementFromPoint(_touch.clientX, _touch.clientY);
var _left = _touch.clientX - droppable.getBoundingClientRect().left;
var _top = _touch.clientY - droppable.getBoundingClientRect().top;
_touch.target.style.left = _left + 'px';
_touch.target.style.top = _top + 'px';
I am getting the droppable container's left and top and subtracting it from draggable item.