Swipe Gesture с Javascript: в реальном времени перевести положение смахивания в положение элемента?

Я использую Zepto.js для мобильного веб-приложения. Zepto поставляется с удобными методами, такими как swipe, swipeLeft и swipeRight.

Например: жест swipeLeft срабатывает после завершения смахивания влево. По крайней мере, так я это вижу.

Можно ли обновить позицию элемента с живыми значениями из этого жеста смахивания.

Поэтому при медленном свайпе влево по моему документу я хочу, чтобы div.layer медленно двигался вместе со мной. При достижении критической точки layer должен привязаться к предопределенной позиции.

Возможно ли это как-то. Я бы выбрал другой фреймворк, если это невозможно с Zepto.

Что у меня есть сейчас

HTML

<div class="page-wrap">

    <section class="layer" id="one">

    </section>

    <section class="layer" id="two">

    </section>

</div>

CSS

.page-wrap {
    position:relative;
    width:100%;
    height:100%;
}

.page-wrap .layer {
    width:100%;
    height:100%;    
    position:absolute;
    top:0;
}   

.page-wrap #one {
    background:red;
}

.page-wrap #two {
    left:-100%;
    background:green;
}

JS

$(document).ready(function() {  
    $('#two').swipeRight(function(e) {
        showInfos(true);
    });

    $('#one').swipeLeft(function(e) {
        showInfos(false);
    });
});

function showInfos(show) {
    $("#two").animate({
        left: show?'0':'-100%'
    }, 200, 'ease-out');
}

Это работает! .layer#two расположен за пределами видимого окна просмотра. При свайпе вправо на .layer#one .layer#two скользит слева. При смахивании влево на .layer#two .layer#two скользит обратно влево.

Это именно то, что я хочу, чтобы мое приложение делало. Шаблон хорошо известен, и многие приложения используют этот шаблон пользовательского интерфейса.

Однако то, что я хочу, это вести себя так, как будто это родное приложение на мобильном телефоне, где при скольжении пальца по .layers .layers обновляют свою позицию относительно пальца пользователя. Поэтому я не хочу, чтобы анимация вступала в силу после выполнения жеста swipe. Я хочу, чтобы position из .layer#two обновлялись при пролистывании.

Может быть, вы хотите где-нибудь протестировать его вживую. Я предоставил приведенные выше фрагменты на jsfiddle.

Я был бы очень признателен за помощь в этом. Или советы и рекомендации. Думаю, я не единственный, кто заинтересован в чем-то подобном.


mobile javascript web-applications gesture zepto
person matt    schedule 11.10.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Рассмотрите возможность использования собственных обработчиков сенсорных событий: http://www.html5rocks.com/en/mobile/touch/

Пример перетаскивания div с этой страницы:

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
  // If there's exactly one finger inside this element
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    // Place element where the finger is
    obj.style.left = touch.pageX + 'px';
    obj.style.top = touch.pageY + 'px';
  }
}, false);

Если вы обновите это, чтобы просто изменить координату x, вы почти закончили.

person Phil H    schedule 11.10.2012
comment
Спасибо, кажется, это действительно изменчиво для меня. - person matt; 11.10.2012
comment
Используйте преобразования webkit вместо left/top. - person Ronald; 11.12.2012