使用hammerjs與translate3d ...重置爲0

Question

ready = -> 
    transform = {} 

    handlePan = (ev) -> 
    el = $(".actions[data-object='" + ev.target.dataset.object + "']") 
    el.removeClass('accept').addClass('reject') if ev.deltaX < 0 
    el.removeClass('reject').addClass('accept') if ev.deltaX > 0 
    transform.translate = { x: ev.deltaX } 
    updateElementTransform(ev.target.dataset.object) 

    updateElementTransform = (obj) -> 
    value = [ 
     'translate3d(' + transform.translate.x + 'px, 0px, 0)' 
    ] 
    value = value.join(" ") 
    el = document.querySelector(".vehicle[data-object='" + obj + "']") 
    el.style.webkitTransform = value 
    el.style.mozTransform = value 
    el.style.transform = value 

    createHammer = (v) -> 
    mc = new Hammer.Manager(v, {}) 
    mc.add new Hammer.Pan(
     direction: Hammer.DIRECTION_HORIZONTAL 
     threshold: 0 
    ) 
    mc.on 'panleft', handlePan 
    mc.on 'panright', handlePan 

    selector = '.market-place .vehicle' 
    createHammer(v) for v in document.querySelectorAll(selector) 

$(document).ready(ready) 
$(document).on('page:load', ready) 

所以，我移動一個項目後，這...留在我離開它。但是如果我試圖再次抓住它，當我開始移動它時，它會從「零」開始，而不是從我離開的位置開始。

Answer 1

發生這種情況是因爲ev.deltaX引用當前手勢。您可以將其值保存在平底鍋上，然後在計算翻譯時將其添加。

類似：

var totalDeltaX = 0; 

mc.on('pan', function(e){ 
    // translateX = totalDeltaX + e.deltaX ... 
}); 

mc.on('panend', function(e){ 
    // totalDeltaX += e.deltaX ... 
});