Question

当用户使用Hammer.js平移它时，我想translateX()一个元素。当用户拖动内容时，我想翻译左边的内容。同样的权利。

当前代码：

var manager = new Hammer.Manager(elem);

var panner = new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 0 });

manager.add(panner);

manager.on("panleft", function(e) {
    elem.style.transform = "translateX(" + (e.distance * -1) + "px)";
});

manager.on("panright", function(e) {
    elem.style.transform = "translateX(" + e.distance + "px)";
});

除非用户向左移动然后向后向右移动，否则它会起作用，它会出现故障并变为负数。我怎样才能使它发挥作用？

Answer 1

我通过绑定到e.deltaX事件并使用manager.on("panmove", function(e) { elem.style.transform = "translateX(" + e.deltaX + "px)"; });属性来解决它：

h2 It's new article
p test
= form_for @article do |f|
  = f.fields_for :article_history do |af|
    .field
      = af.label :title
      br
      = af.text_field :title
    .field
      = af.label :content
      br
      = af.text_area :content
    = af.hidden_field :id
  .field
    = f.hidden_field :status, :value => "publish"
  = f.hidden_field :user_id, :value => current_user.id
  = f.hidden_field :current_version, :value => 1
  .actions
    = f.submit 'submit'

如何根据Hammer.js pan设置translateX的样式？

1 个答案: