如何制作可拖动的触摸？

Question

我希望橙色矩形可以使用鼠标或触摸进行拖动。鼠标的功能对我有用，所以我尝试复制它并用 ontouchstart 替换 mousedown，用 ontouchmove 替换 mousemove，用 ontouchend 替换 mouseup，但它似乎没有移动。有什么建议么？谢谢！

var move = document.querySelector('.move');

move.addEventListener('mousedown', mousedown);
move.addEventListener('ontouchstart', ontouchstart);

function mousedown() {

  move.addEventListener('mousemove', mousemove); 
  move.addEventListener('mouseup', mouseup); 
  function mousemove(e){
    
    var x = e.clientX - 100 + 'px';
    var y = e.clientY - 100 + 'px'; 
    this.style.left = x;
    this.style.top = y;

  }

  function mouseup() {
    move.removeEventListener('mousemove', mousemove)
  }
 
}

function ontouchstart() {

  move.addEventListener('ontouchmove', ontouchmove); 
  move.addEventListener('ontouchend', ontouchend);
  function ontouchmove(e){
    
    var x = e.clientX - 100 + 'px';
    var y = e.clientY - 100 + 'px'; 
    this.style.left = x;
    this.style.top = y;

  }

  function ontouchend() {
    move.removeEventListener('ontouchmove', ontouchmove)
  }
 
}

.move {
  height: 200px;
  width: 200px;
  background: orange;
  position: fixed;
}

<body>
  <div class="move"></div>

  <script src="script.js"></script>
</body>

Answer 1

一方面，您的活动名称不正确。省略 on 前缀。

其次，touchmove 与 mousemove 的工作方式略有不同。传递给 touchmove 的事件参数没有 clientX 或 clientY 属性。相反，它包含一个需要迭代的 TouchList。见下文：

var move = document.querySelector('.move');

move.addEventListener('mousedown', mousedown);
move.addEventListener('touchstart', ontouchstart);

function mousedown() {

  move.addEventListener('mousemove', mousemove);
  move.addEventListener('mouseup', mouseup);

  function mousemove(e) {

    var x = e.clientX - 100 + 'px';
    var y = e.clientY - 100 + 'px';
    this.style.left = x;
    this.style.top = y;

  }

  function mouseup() {
    move.removeEventListener('mousemove', mousemove)
  }

}

function ontouchstart() {

  move.addEventListener('touchmove', ontouchmove);
  move.addEventListener('touchend', ontouchend);

  function ontouchmove(e) {

    e.preventDefault();
    for (target of e.targetTouches) {
      var x = target.clientX - 100 + "px";
      var y = target.clientY - 100 + "px";
      this.style.left = x;
      this.style.top = y;
    }

  }

  function ontouchend() {
    move.removeEventListener('touchmove', ontouchmove)
  }

}

.move {
  height: 200px;
  width: 200px;
  background: orange;
  position: fixed;
}

<body>
  <div class="move"></div>

  <script src="script.js"></script>
</body>

有关详细信息，请参阅 Touch Events and Using Touch Events。

如何制作可拖动的触摸？

How to make a draggable for touch?

html

javascript

drag