拖动的项目比光标移动得更快

Question

我正在尝试编写一些代码来创建拖放式迷你游戏。到目前为止，我对代码的可触摸部分有疑问。当我添加可拖动选项（仅使用光标）时，它运行良好。

但我尝试使用此教程添加一些可触摸代码（以允许手机或平板电脑上的人也可以使用它）：https://www.kirupa.com/html5/drag.htm .

不过我有一个主要问题：拖动的项目比光标移动得更快，距离拖动开始点越远。

您可以在下面的 javascript 中看到问题：http://jsfiddle.net/0n8x6gue/1/

var container = document.querySelector("#section");
var activeItem = null;

var active = false;

container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);

container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);

function dragStart(e) {

  if (e.target !== e.currentTarget) {
    active = true;

    // item avec lequel on interagit
    activeItem = e.target;

    if (activeItem !== null) {
      if (!activeItem.xOffset) {
        activeItem.xOffset = 0;
      }

      if (!activeItem.yOffset) {
        activeItem.yOffset = 0;
      }

      if (e.type === "touchstart") {
        activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
        activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
      } else {
        console.log("doing something!");
        activeItem.initialX = e.clientX - activeItem.xOffset;
        activeItem.initialY = e.clientY - activeItem.yOffset;
      }
    }
  }
}

function dragEnd(e) {
  if (activeItem !== null) {
    activeItem.initialX = activeItem.currentX;
    activeItem.initialY = activeItem.currentY;
  }

  active = false;
  activeItem = null;
}

function drag(e) {
  if (active) {
    e.preventDefault();
    if (e.type === "touchmove") {

      activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
      activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
    } else {
      activeItem.currentX = e.clientX - activeItem.initialX;
      activeItem.currentY = e.clientY - activeItem.initialY;
    }

    activeItem.xOffset = activeItem.currentX;
    activeItem.yOffset = activeItem.currentY;

    setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
  }
}

function setTranslate(xPos, yPos, el) {
  el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

#bloc_page {
  width: 75%;
  margin: auto;
  min-width: 900px;
}

#section {
  display: flex;
  height: 500px;
  border: solid 1px;
}

h1 {
  text-align: center;
}


/* Jeu */

.yobi.ui-draggable-dragging {
  border: dashed rgba(53, 187, 243, 0.9);
}

#propositions {
  height: 100%;
  width: 25%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.yobi {
  border: solid rgba(53, 187, 243, 0.9);
  padding: 8px;
  margin: 10px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  list-style-type: none;
  background-color: white;
  user-select: none;
}

 :hover {
  border-color: rgba(255, 134, 172, 0.9);
  cursor: pointer;
}

 :active {
  cursor: none;
}

<!DOCTYPE html>

<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>Test</title>
  <!--Titre de la page dans l'onglet en haut-->
  <link href="main.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript" src="app.js" async></script>
  <script>
    (window.jQuery || document.write('<script src="/scripts/jquery-3.6.0.min.js"><\/script>'));
  </script>
  <!--Charger jQuery depuis fichier local si le CDN est indisponible-->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>
  <div id="bloc_page">
    <header>
      <h1>Les Jours de la Semaine - 曜日</h1>
    </header>

    <section id="section">
      <div id="propositions">
        <ul>
          <li class="yobi">げつようび</li>
          <li class="yobi">かようび</li>
          <li class="yobi">すいようび</li>
          <li class="yobi">もくようび</li>
          <li class="yobi">きんようび</li>
          <li class="yobi">どようび</li>
          <li class="yobi">にちようび</li>
        </ul>
      </div>
    </section>
  </div>
</body>

</html>

Answer 1

看起来问题出在 setTranslate 函数中。您的块已经通过设置 activeItem.currentX 和 activeItem.currentY 变量移动，然后平移其位置。

在你的情况下，它会导致双重移动：你的块移动速度比光标快 2 倍。

要解决您的问题，您可以这样更改拖动函数：

function drag(e) {
    if (active) {
        e.preventDefault();
        
        if (e.type === "touchmove") {
            activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
            activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
        } else {
            activeItem.currentX = e.clientX - activeItem.initialX;
            activeItem.currentY = e.clientY - activeItem.initialY;
        }

        activeItem.xOffset = activeItem.currentX;
        activeItem.yOffset = activeItem.currentY;

        if (e.type === "touchmove") {
            setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
        }
    }
}

拖动的项目比光标移动得更快

Dragged item going faster than cursor

javascript

drag

drop