Одновременное перетаскивание блоков по touch экрану на js возможно?

Question

[Егор Шустров]

Здравствуйте. встал такой вопрос:
Допустим у нас есть тачь экран, например 1920 х 1080.
на нем мы открываем некую страницу в браузере а тАаааммм...
есть 10-20 разных дивов ну простых например.
width:200px;
height:200px;
background:#222;

Тач поддерживает 12 касаний. нужно чтобы одновременно можно было передвигать эти квадратики. ( ну естественно не более 12 так как тачь на 12 касаний :)
а не чтобы при 3-4 разных касаниях они сбивались в 1 кучку.
Буду рад если есть библиотеки или фреймворки на js или jq, ( желательно с примерами :)
ну или просто примерчик если несложно. за ранние спасибо.

Answer 1

[Егор Шустров]

От вас пока дождешся. сам нашел решение.
Вот. может кому пригодится:

$('.block').on('touchstart touchmove touchend mousedown', function(event) {
		var elemetn = $(this);
		var elX = (elemetn.width()/2);
		var elY = (elemetn.height()/2);
		event.preventDefault();
		event.stopPropagation();
		// тачь нажатие
		if (event.type == 'touchstart') { // если нажали пальцем
			elemetn.addClass('active-mov');
		}
		
		if (event.type == 'touchmove') { // если тянем пальцем
			if (event.targetTouches.length == 1) { // 1 касание
				var touch = event.targetTouches[0];
				var x = touch.pageX;
				var y = touch.pageY;
				$(elemetn).css({'left' : x-elX,'top':y-elY});
			}
		}
		
		if (event.type == 'touchend') { // если отпустили пальцем
			elemetn.removeClass('active-mov');
		}
		
		
		if (event.type == 'mousedown') { // если кликнули мышью
			elemetn.addClass('active-mov');
			doc.onmousemove = function(event) {
				var x = event.clientX;
				var y = event.clientY
				$(elemetn).css({'left' : x-elX,'top':y-elY});
				$('#info').html('touch.pageY = ' + y + '<br> touch.pageX = ' + x);
			}
			
			doc.onmouseup = function(event) { // если отпустили мыш
				doc.onmousemove = null;
				$('.block').onmousemove = null;
				elemetn.removeClass('active-mov');
			}
		}
		
	});

и да незабываем еще вот такие штуки

// убераем скрол
document.addEventListener('touchstart', function(event){
    event.preventDefault();
});

// отключить браузерные функции перетаскивания	
document.ondragstart = function() {
  return false;
};

и немного для андройд устройство

<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />