I'm currently developing a drag and drop minigame, but I've encountered an issue with the touch functionality. The draggable function (using only cursor) works flawlessly, however, when I tried to implement touch support for mobile and tablet users following this tutorial: , I faced a major problem.
The dragged item seems to move faster than the cursor the further away it goes from the initial drag point.
You can witness the issue in action by checking out the JavaScript here: 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;
// interacting item
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;
}
/* Game */
.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>
<!--Title of the page in the browser tab-->
<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>
<!--Load jQuery from local file if CDN is not available-->
<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>Days of the Week - 曜日</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>