adtc/dndwithtouch

Drag and Drop with Touch API - now enhanced with two drop zones, and the ability to work correctly even when the page can be scrolled.

dndwithtouch's Issues

Use elementFromPoint to detect the drop zone in a simpler, scalable way

So it turns out that the entire concept of calling getBoundingClientRect() on each drop zone one by one is unnecessary.

There's a better way to do this: document.elementFromPoint(touch.clientX, touch.clientY). Just get the element, check if it's a drop zone, and drop the element there.

We need to update this function:

DnDWithTouch/main.js

Lines 144 to 154 in 7e93c83

	function detectDropOn(zone, x, y) {
	var rect = zone.getBoundingClientRect();
	var x1 = rect.left;
	var y1 = rect.top;
	var x2 = rect.right;
	var y2 = rect.bottom;
	//Very simple detection here
	var returnvalue = false;
	if (x1 <= x && y1 <= y && x <= x2 && y <= y2) {
	returnvalue = true;
	}

Use changedTouches in handleTouchEnd to find the last touch point

Instead of storing the last touch point in global variables, we can simply detect them locally in handleTouchEnd using changedTouches. It would look something like this:

let touch = e.changedTouches[0]
if (!touch.target.id /* try to check if it's current target */) { return }
let elem = document.elementFromPoint(touch.clientX, touch.clientY)

(Note: The last line corresponds to issue #1)