Mousemove -Ereignis Unvorgeordnetes Verhalten beim Ziehen von Karten ⇐ JavaScript

[Anonymous]

Hallo, ich versuche, den Swiper.js-Effekt zu imitieren, der Drag-Effekt, bei dem Sie eine Karte ziehen können
und beim Ziehen werden sie nach der Mausbewegung
drehen, aber ich habe ein Problem mit meiner Implementierung, was passiert. Effekt
4- Klicken Sie dann erneut auf die Kartenüberläufe. Es ist Container und bewegt sich sehr schnell, nicht reibungslos < /p>

Code: Select all

Document

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.scene {
perspective: 1000px;
width: 1140px;
/* perspective-origin: center; */
}
.cards {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
transform-style: preserve-3d;
}
.card {
position: relative;
width: 350px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
/* transform-style: preserve-3d; */
/* transition: all 2s; */
cursor: grab;
user-select: none;
}
/* .card:hover {
transform: rotateY(180deg);
} */
.card-side {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-front {
background-color: #339af0;
transform: rotateY(0deg);
}
.card-back {
background-color: #40c057;
transform: rotateY(180deg);
}






[url=#]FRONT[/url]
[url=#]BACK[/url]







const cardsContainer = document.querySelector(".cards");
const cards = document.querySelectorAll(".card");
let isDragging = false;
let animationId;
let cardsRect;
let prevClientX;
let delta;
const mappedValue = function (x, fromMin, fromMax, toMin, toMax) {
const val = toMin + ((x - fromMin) * (toMax - toMin)) / (fromMax - fromMin);
return Math.min(toMax, Math.max(toMin, val));
};

cardsContainer.addEventListener("mousedown", function (e) {
cardsRect = cards[0].getBoundingClientRect();
prevClientX = e.clientX;
const firstClick = e.clientX - cardsRect.left;

if (firstClick > cardsRect.width || firstClick < 0) return;

const handleMouseMove = function (e) {
isDragging = true;
const containerRect = cardsContainer.getBoundingClientRect();
cardsRect = cards[0].getBoundingClientRect();
delta = e.clientX - prevClientX;
if (e.clientX < containerRect.left || e.clientX > containerRect.right)
return;

cards[0].style.transition = "transform 0.5s ease-out";
cards[0].style.transform = `translateX(${delta}px) rotateY(${mappedValue(
delta,
0,
containerRect.width,
-80,
240
)}deg)`;
};
const handleMouseUp = function (e) {
isDragging = false;
document.removeEventListener("mousemove", handleMouseMove);
};
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
});