Skip to content

Commit

Permalink
Add support for two fingers
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikkosiikaniemi
mikkosiikaniemi committed Oct 7, 2023
1 parent c50c201 commit a5aa02a
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 62 deletions.
3 changes: 2 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@

<body>
<!-- <h1>Touch Sprint</h1> -->
<div id="draggable" class="draggable-element"></div>
<div id="finger-left" class="finger left"></div>
<div id="finger-right" class="finger right"></div>
<div id="distance">0</div>
<script src="touchsprint.js"></script>
</body>
Expand Down
21 changes: 16 additions & 5 deletions touchsprint.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,26 @@ h1 {
-webkit-text-stroke: min(.6vw, 8px ) #333;
}

.draggable-element {
background-image: url('finger.svg');
.finger {
transform:scaleY(-1);
width: 30vw;
height: 30vw;
width: 50vw;
height: 40vw;
cursor: pointer;
position: absolute;
top: 100px;
left: calc( 50% - 15vw );
background-repeat: no-repeat;
}

.finger.left {
background-image: url('finger.svg');
left: 0;
background-position: 80% center;
}

.finger.right {
background-image: url('finger.svg');
left: 50%;
background-position: 20% center;
}

#distance {
Expand Down
185 changes: 129 additions & 56 deletions touchsprint.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,28 @@
const draggableElement = document.getElementById("draggable");
const finger1 = document.getElementById("finger-left");
const finger2 = document.getElementById("finger-right");
const body = document.body;
const distanceDisplay = document.getElementById("distance");

const originalPositionY = draggableElement.style.top;
const originalPositionX = draggableElement.style.left;
const originalDistanceFromTop = draggableElement.offsetTop;

let isDragging = false;
let offsetX, offsetY;
let initialPositionX, initialPositionY;
const originalPositionY1 = finger1.style.top;
const originalPositionX1 = finger1.style.left;
const originalPositionY2 = finger2.style.top;
const originalPositionX2 = finger2.style.left;
const originalDistanceFromTop1 = finger1.offsetTop;
const originalDistanceFromTop2 = finger2.offsetTop;

let isDragging1 = false;
let isDragging2 = false;
let offsetX1, offsetY1;
let offsetX2, offsetY2;
let initialPositionX1, initialPositionY1;
let initialPositionX2, initialPositionY2;
let totalDistance = 0;

// Add mouse and touch event listeners
draggableElement.addEventListener("mousedown", startDrag);
draggableElement.addEventListener("touchstart", startDrag);
finger1.addEventListener("mousedown", startDrag1);
finger1.addEventListener("touchstart", startDrag1);
finger2.addEventListener("mousedown", startDrag2);
finger2.addEventListener("touchstart", startDrag2);

document.addEventListener("mousemove", drag);
document.addEventListener("touchmove", drag);
Expand All @@ -25,78 +34,142 @@ document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

function startDrag(e) {
isDragging = true;
function startDrag1(e) {
console.log('Dragging 1.')
isDragging1 = true;

// Handle both mouse and touch events
if (e.type === "mousedown") {
offsetX = e.clientX - draggableElement.getBoundingClientRect().left;
offsetY = e.clientY - draggableElement.getBoundingClientRect().top;
offsetX1 = e.clientX - finger1.getBoundingClientRect().left;
offsetY1 = e.clientY - finger1.getBoundingClientRect().top;
} else if (e.type === "touchstart") {
const touch = e.touches[0];
offsetX = touch.clientX - draggableElement.getBoundingClientRect().left;
offsetY = touch.clientY - draggableElement.getBoundingClientRect().top;
console.log(offsetY);
offsetX1 = touch.clientX - finger1.getBoundingClientRect().left;
offsetY1 = touch.clientY - finger1.getBoundingClientRect().top;
}

// Store the initial position of the element
initialPositionX = parseInt(draggableElement.style.left) || 0;
initialPositionY = parseInt(draggableElement.style.top) || 0;
initialPositionX1 = parseInt(finger1.style.left) || 0;
initialPositionY1 = parseInt(finger1.style.top) || 0;

// Set the element's position to "fixed" so it can be dragged freely
draggableElement.style.position = "fixed";
draggableElement.style.zIndex = "1000";
finger1.style.position = "fixed";
finger1.style.zIndex = "1000";
}

function drag(e) {
if (!isDragging) return;
function startDrag2(e) {
isDragging2 = true;

// Handle both mouse and touch events
let clientX, clientY;
if (e.type === "mousemove") {
clientX = e.clientX;
clientY = e.clientY;
} else if (e.type === "touchmove") {
if (e.type === "mousedown") {
offsetX2 = e.clientX - finger2.getBoundingClientRect().left;
offsetY2 = e.clientY - finger2.getBoundingClientRect().top;
} else if (e.type === "touchstart") {
const touch = e.touches[0];
clientX = touch.clientX;
clientY = touch.clientY;
offsetX2 = touch.clientX - finger2.getBoundingClientRect().left;
offsetY2 = touch.clientY - finger2.getBoundingClientRect().top;
}

// Calculate the new position of the element
const newY = clientY - offsetY;
const newX = clientX - offsetX;
// Store the initial position of the element
initialPositionX2 = parseInt(finger2.style.left) || 0;
initialPositionY2 = parseInt(finger2.style.top) || 0;

// Calculate the distance moved during this drag
let distanceY = newY - initialPositionY;
// Set the element's position to "fixed" so it can be dragged freely
finger2.style.position = "fixed";
finger2.style.zIndex = "1000";
}

// Deduct the original elemtent distance from the top of the viewport
if (distanceY === newY) {
distanceY -= originalDistanceFromTop;
}
function drag(e) {
if (isDragging1 || isDragging2) {

// Handle both mouse and touch events
let clientX, clientY;
if (e.type === "mousemove") {
clientX = e.clientX;
clientY = e.clientY;
} else if (e.type === "touchmove") {
const touch = e.touches[0];
clientX = touch.clientX;
clientY = touch.clientY;
}

// Calculate the new position and distance for draggableElement1
if (isDragging1) {
const newY1 = clientY - offsetY1;
const newX1 = clientX - offsetX1;

// Calculate the distance moved during this drag
let distanceY1 = newY1 - initialPositionY1;

// Deduct the original elemtent distance from the top of the viewport
if (distanceY1 === newY1) {
distanceY1 -= originalDistanceFromTop1;
}

// Update the element's position based on the mouse/touch position and offset
finger1.style.left = newX1 + "px";
finger1.style.top = newY1 + "px";

// Update the total distance
totalDistance += distanceY1;

// Update the element's position based on the mouse/touch position and offset
draggableElement.style.left = newX + "px";
draggableElement.style.top = newY + "px";
initialPositionY1 = newY1;
}

// Update the background position to move it together with the element
body.style.backgroundPositionY = totalDistance + "px";
// Calculate the new position and distance for draggableElement1
if (isDragging2) {
const newY2 = clientY - offsetY2;
const newX2 = clientX - offsetX2;

// Update the total distance
totalDistance += distanceY;
distanceDisplay.textContent = totalDistance.toFixed(0);
// Calculate the distance moved during this drag
let distanceY2 = newY2 - initialPositionY2;

// Update the initial position for the next drag
initialPositionY = newY;
// Deduct the original elemtent distance from the top of the viewport
if (distanceY2 === newY2) {
distanceY2 -= originalDistanceFromTop2;
}

// Update the element's position based on the mouse/touch position and offset
finger2.style.left = newX2 + "px";
finger2.style.top = newY2 + "px";

// Update the total distance
totalDistance += distanceY2;

initialPositionY2 = newY2;
}

// Update the background position to move it together with the element
body.style.backgroundPositionY = totalDistance + "px";

distanceDisplay.textContent = totalDistance.toFixed(0);

// Update the initial position for the next drag


}
}

function endDrag() {
if (!isDragging) return;
if (isDragging1) {

// Reset the element's position to "absolute" and return it to its original place
draggableElement.style.position = "absolute";
draggableElement.style.zIndex = "0";
draggableElement.style.left = originalPositionX;
draggableElement.style.top = originalPositionY;
// Reset the element's position to "absolute" and return it to its original place
finger1.style.position = "absolute";
finger1.style.zIndex = "0";
finger1.style.left = originalPositionX1;
finger1.style.top = originalPositionY1;

isDragging1 = false;
}

isDragging = false;
if (isDragging2) {

// Reset the element's position to "absolute" and return it to its original place
finger2.style.position = "absolute";
finger2.style.zIndex = "0";
finger2.style.left = originalPositionX2;
finger2.style.top = originalPositionY2;

isDragging2 = false;
}
}

0 comments on commit a5aa02a

Please sign in to comment.