3

Написал функцию для 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);

Как можно адаптировать функцию под любое количество элементов?

1 ответ 1

1

Каждому квадратику задайте класс (например .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

3
  • Незнаю почему но так, не работает ... 11 сен 2016 в 19:02
  • Да, вы правы - проверил код на jsfiddle и исправил недочеты. Теперь будет работать. 12 сен 2016 в 1:20
  • Большое спасибо. Всё работает отлично 12 сен 2016 в 6:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.