From 2e67661f0016874b7afbfeeb773401b94d5cefcd Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Thu, 11 Aug 2022 01:09:44 -0400 Subject: Fix dragging for scaled cards --- scripts/cards/card.js | 16 ++++++++++++---- scripts/cards/drag.js | 16 ++++++++-------- styles/client/card.css | 7 +++++++ 3 files changed, 27 insertions(+), 12 deletions(-) diff --git a/scripts/cards/card.js b/scripts/cards/card.js index 17d8994..53e9861 100644 --- a/scripts/cards/card.js +++ b/scripts/cards/card.js @@ -11,8 +11,8 @@ class Card { { this.e = document.createElement("card"); this.generateElements(data); - this.e.style.left = "0px"; - this.e.style.top = "0px"; + this.e.style.setProperty("--left", "0px"); + this.e.style.setProperty("--top", "0px"); this.e.card = this; this.id = id; @@ -123,8 +123,16 @@ class Card { resetPos() { - this.e.style.left = "0px"; - this.e.style.top = "0px"; + this.e.style.setProperty("--left", "0px"); + this.e.style.setProperty("--top", "0px"); + } + + resetPosInstant() + { + this.e.className = "instant"; + this.e.style.setProperty("--left", "0px"); + this.e.style.setProperty("--top", "0px"); + this.e.className = ""; } getDeck() { diff --git a/scripts/cards/drag.js b/scripts/cards/drag.js index fa1ef65..ec82ade 100644 --- a/scripts/cards/drag.js +++ b/scripts/cards/drag.js @@ -62,8 +62,8 @@ class MultiDrag extends EventTarget { cap.drag = this.addDragEl( e.target, - e.pageX - parseInt(e.target.style.left), - e.pageY - parseInt(e.target.style.top), + e.pageX - parseInt(e.target.style.getPropertyValue("--left")), + e.pageY - parseInt(e.target.style.getPropertyValue("--top")), e.target.style.left, e.target.style.top, e.target.style.transitionDuration @@ -88,8 +88,8 @@ class MultiDrag extends EventTarget { this.drag[i].e.style.transitionDuration = this.drag[i].ptd; if(this.ret) { - this.drag[i].e.style.left = this.drag[i].prx; - this.drag[i].e.style.top = this.drag[i].pry; + this.drag[i].e.style.setProperty("--left", this.drag[i].prx + "px"); + this.drag[i].e.style.setProperty("--top", this.drag[i].pry + "px"); } cap.drag = this.drag.splice(i, 1); @@ -123,8 +123,8 @@ class MultiDrag extends EventTarget { this.drag[0].e.style.transitionDuration = this.drag[0].ptd; if(this.ret) { - this.drag[0].e.style.left = this.drag[0].prx; - this.drag[0].e.style.top = this.drag[0].pry; + this.drag[0].e.style.setProperty("--left", this.drag[0].prx + "px"); + this.drag[0].e.style.setProperty("--top", this.drag[0].pry + "px"); } cap.drag.push(this.drag.shift()); @@ -140,8 +140,8 @@ class MultiDrag extends EventTarget { this.mouse[1] = e.pageY; for (let i = 0; i < this.drag.length && !this.del; i++) { - this.drag[i].e.style.left = e.pageX - this.drag[i].osx + "px"; - this.drag[i].e.style.top = e.pageY - this.drag[i].osy + "px"; + this.drag[i].e.style.setProperty("--left", e.pageX - this.drag[i].osx + "px"); + this.drag[i].e.style.setProperty("--top", e.pageY - this.drag[i].osy + "px"); } } diff --git a/styles/client/card.css b/styles/client/card.css index 6f03347..9ac6f3d 100644 --- a/styles/client/card.css +++ b/styles/client/card.css @@ -1,3 +1,7 @@ +.instant { + transition-duration: 0s; +} + card { position: absolute; @@ -15,6 +19,9 @@ card user-select: none; box-sizing: border-box; + left: calc(var(--left) / var(--scale)); + top: calc(var(--top) / var(--scale)); + z-index: 3; } -- cgit v1.2.3