Написал функцию для multitouch, но она немножко кривовата. У меня функция применяется для того, чтобы можно было пальцами перемещать квадратики (div-элементы) по несколько штук, в зависимости от количества касаний. Но проблема в том, что функцию приходится вызывать для каждого элемента отдельно, что не очень удобно, так как код увеличивается в размерах, плюс, возможно, самих дивов будет больше.
Вот пример функции для 2-х элементов:
var obj = document.getElementById('elem_1');
obj.addEventListener('touchmove', function(event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
obj.style.left = touch.pageX + 'px';
obj.style.top = touch.pageY + 'px';
}
}, false);
var obj2 = document.getElementById('elem_2');
obj2.addEventListener('touchmove', function(event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
obj2.style.left = touch.pageX + 'px';
obj2.style.top = touch.pageY + 'px';
}
}, false);
Как можно адаптировать функцию под любое количество элементов?
Ответ
Каждому квадратику задайте класс (например .js-multitouch), а код в js замените на:
$(document).ready(function() {
var elements = $('.js-multitouch');
if (elements.length) {
elements.each(function(e) {
var element = $(this)
element.bind('touchmove', function(event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
element[0].style.left = touch.pageX + 'px';
element[0].style.top = touch.pageY + 'px';
}
});
});
}
});
В скрипте используется jQuery. В вашем коде он не встречается, но у вопроса стоит ярлык jquery, значит, если я верно понял - можно его использовать.
Рабочий пример на jsfiddle
Комментариев нет:
Отправить комментарий