События touch в мобильных браузерах

Часть 2. Перемещение объектов.

В предыдущей статье на эту тему мы говорили о том, какие есть обработчики событий для сенсорных устройств, а так же свойства объекта Event которые позволяют работать с данными события. Данный пост тесно связан темой предыдущей публикации, и я решил сделать его в виде продолжения. Здесь мы рассмотрим пример перемещения элементов, в нашем случае это блок DIV посредством сенсора. Реализовать это дело не сложно, можно сделать так, чтобы блок перемещался по горизонтали или по вертикали, не столь важно направление, сколько возможность реализовать это.
Пример работы скрипта демонстрирующего перемещение блока по горизонтали (для устройств без сенсора в примере добавлена поддержка обычных курсоров мыши).

<script>
window.addEventListener('load', function(){
    var box2 = document.getElementById('box2'),
    boxleft, // положение блока по левой стороне
    startx, // стартовая точка соприкосновения по x
    dist = 0, // расстояние перемещения точки
    touchobj = null // содержимое объекта перемещения
  
    box2.addEventListener('touchstart', function(e){
        touchobj = e.changedTouches[0] // первая точка соприкосновения для этого события
        boxleft = parseInt(box2.style.left) // положение блока по левой стороне
        startx = parseInt(touchobj.clientX) // получение координаты по x точки соприкосновения
        e.preventDefault() // отключаем реакцию элементов по умолчанию в браузере
    }, false)
  
    box2.addEventListener('touchmove', function(e){
        touchobj = e.changedTouches[0] // первая точка соприкосновения для этого события
        var dist = parseInt(touchobj.clientX) - startx // подсчет расстояния перемещения
        // перемещение блока от старновой позиции + дистанция
        // выставляем лимит, чтобы блок не выходил за пределы от 0 до 380
        box2.style.left = ( (boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist ) + 'px'
        e.preventDefault()
    }, false)
  
}, false)
</script>
  
<div id="track" class="track">
<div id="box2" style="left:0; top:0">Поехали!</div>
</div>

Итак, у нас есть два блока #track, он является наружным блоком, и вложенный блок #box2. Наружный блок #track является DIV-элементом, он имеет относительное позиционирование, в тот момент как элемент #box2 позиционирован абсолютно. Мы узнаем координаты начальной позиции по левой стороне блока #box2, а так же координаты по x точки прикосновения по событию touchstart.

При возникновении события touchmove мы вычисляем расстояние, пройденное движущейся точки соприкосновения, получая его положение по x, и вычитая из начальной точки перемещения по x. После этого, чтобы блок #box2 двигался в пределе установленных координат, а это от 0 до 380px, мы проверяем нижний и верхний предел перемещения. Таким образом, блок движется по оси, в пределах установленных координат.

Так же есть интересная команда характерная для сенсорных устройств, называется она «swipe», и используется для различных целей. Об этом подробнее вы можете узнать в этой статье.

ТОП 10 случайных публикаций