Dragging two elements at once

Question

I want some help
https://code.sololearn.com/WkJVt3oqrv6I/?ref=app
There are two div elements, I want to drag both with two different fingers but when I do this, one div goes on one finger

Answer 1

further to taste's answer
error demo (no touches[1] when dragging only blue) :
https://code.sololearn.com/WQ6GX0oGI9R5/?ref=app
correct way (event delegation) :
https://code.sololearn.com/WTUS1utrc7sT/?ref=app
Taste How to ensure touches[1] is applied on second finger target? Explicitly, when first finger is blue, and second finger is red.

Answer 2

When using multi fingers on touch, it would create 2 set of e.touches array, e.touches[0] and e.touches[1]
You should use touchstart event to detect the e.touches.length, and then use touchmove to track of e.touched[n].x / y.

Answer 3

I tried to keep track the touched using touchstart and touchend
https://code.sololearn.com/WGv7W9pMfkD3/?ref=app

Answer 4

Gordon like this maybe,
https://code.sololearn.com/W8RfNlkWVFrk/?ref=app
edit: play around with it for a little bit, its not 100% usable.

Answer 5

use touches[1] for a second finger