长按可增加移动位置

Question

我正在尝试检测移动设备上的长按，并让其增加精灵在屏幕上的位置。此刻，touchstart每次触摸都会使精灵移动10px的增量，而touchend将停止转换。理想情况下，我想长按屏幕，让子画面流畅地移动到该位置。

任何建议和指导将不胜感激。

谢谢。

这是我的代码：

(function() {

  var sprite = document.querySelector('.sprite'),
    touch = {
      left: false,
      right: false
    },
    trans = 0,
    property = getTransformProperty(sprite);

  function getTransformProperty(element) {
    var properties = [
      'transform',
      'WebkitTransform',
      'msTransform',
      'MozTransform',
      'OTransform'
    ];
    var p;
    while (p = properties.shift()) {
      if (typeof element.style[p] != 'undefined') {
        return p;
      }
    }
    return false;
  }

  function translate() {
    sprite.style[property] = 'translateX(' + trans + 'px)';
  }

  function walk(ev) {
    let touches = ev.touches;
    console.log(touches);

    let getClientX = Math.round(touches[0].clientX);

    let spritePos = document.querySelector('.sprite').getBoundingClientRect().right;

    if (getClientX >= spritePos) {
      console.log(`true, ${getClientX} <= ${spritePos}`);
      touch.right = true;
    } else if (getClientX <= spritePos) {
      console.log(`false, ${getClientX} >= ${spritePos}`);
      touch.left = true;
    }

    if (touch.right === true) {
      trans += 10;
      translate();
      sprite.classList.remove('left');
      sprite.classList.add('right');
      sprite.classList.add('walk-right');
    } else if (touch.left === true) {
      trans -= 10;
      translate();
      sprite.classList.remove('right');
      sprite.classList.add('left');
      sprite.classList.add('walk-left');
    }
  }


  function stop(ev) {
    let lastTouch = Math.round(ev.changedTouches[0].clientX);

    let spritePos = document.querySelector('.sprite').getBoundingClientRect().right;

    if (lastTouch >= spritePos) {
      console.log(`true, ${lastTouch} <= ${spritePos}`);
      touch.right = false;
    } else if (lastTouch <= spritePos) {
      console.log(`false, ${lastTouch} >= ${spritePos}`);
      touch.left = false;
    }
    if (touch.right === false) {
      sprite.classList.remove('walk-right');
    }
    if (touch.left === false) {
      sprite.classList.remove('walk-left');
    }
  }

  document.addEventListener('touchstart', walk, false);
  document.addEventListener('touchend', stop, false);
})();

.sprite {
  width: 105px;
  height: 238px;
  margin-top: 40px;
}

.right {
  background-image: url(http://centpourcent.us/clients/test-environment/Ubicare/v3-2/images/test/standing-right1.png);
}

.left {
  background-image: url(http://centpourcent.us/clients/test-environment/Ubicare/v3-2/images/test/standing-left1.png);
}

.walk-right {
  background-image: url(http://centpourcent.us/clients/test-environment/Ubicare/v3-2/images/test/walk-right1.png);
  -webkit-animation: walk .9s steps(6) infinite;
  -moz-animation: walk .9s steps(6) infinite;
  -ms-animation: walk .9s steps(6) infinite;
  -o-animation: walk .9s steps(6) infinite;
  animation: walk .9s steps(6) infinite;
}

.walk-left {
  background-image: url(http://centpourcent.us/clients/test-environment/Ubicare/v3-2/images/test/walk-left1.png);
  -webkit-animation: walk .9s steps(6) infinite;
  -moz-animation: walk .9s steps(6) infinite;
  -ms-animation: walk .9s steps(6) infinite;
  -o-animation: walk .9s steps(6) infinite;
  animation: walk .9s steps(6) infinite;
}

@-webkit-keyframes walk {
  from {
    background-position: 0px;
  }
  to {
    background-position: -612px;
  }
}

@-moz-keyframes walk {
  from {
    background-position: 0px;
  }
  to {
    background-position: -612px;
  }
}

@-ms-keyframes walk {
  from {
    background-position: 0px;
  }
  to {
    background-position: -612px;
  }
}

@-o-keyframes walk {
  from {
    background-position: 0px;
  }
  to {
    background-position: -612px;
  }
}

@-keyframes walk {
  from {
    background-position: 0px;
  }
  to {
    background-position: -612px;
  }
}

<div class="sprite right"></div>

JSFiddle link

Answer 1

您可能想看看this，它向您展示了如何检测长按。然后，您可以将其用作事件侦听器，并使用clientX和clientY使您的精灵移动到被单击/按下的位置。