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 ...
});

使用hammerjs与translate3d ...重置为0

1 个答案: