From: Benjamin Auder Date: Thu, 6 Dec 2018 15:20:27 +0000 (+0100) Subject: Allow smartphone users to drag and drop pieces X-Git-Url: https://git.auder.net/assets/doc/html/%7B%7B%20path%28%27mixstore_user_board%27%29%20%7D%7D?a=commitdiff_plain;h=ffea77d94c1fa041a3cec774950b361a44baea71;p=vchess.git Allow smartphone users to drag and drop pieces --- diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 1e8d9fd2..14d3007a 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -452,9 +452,9 @@ Vue.component('my-game', { mousedown: this.mousedown, mousemove: this.mousemove, mouseup: this.mouseup, -// touchstart: this.mousedown, //TODO... -// touchmove: this.mousemove, -// touchend: this.mouseup, + touchstart: this.mousedown, + touchmove: this.mousemove, + touchend: this.mouseup, }, }, elementArray @@ -794,8 +794,11 @@ Vue.component('my-game', { // If there is an active element, move it around if (!!this.selectedPiece) { - this.selectedPiece.style.left = (e.clientX-this.start.x) + "px"; - this.selectedPiece.style.top = (e.clientY-this.start.y) + "px"; + const [offsetX,offsetY] = !!e.clientX + ? [e.clientX,e.clientY] //desktop browser + : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone + this.selectedPiece.style.left = (offsetX-this.start.x) + "px"; + this.selectedPiece.style.top = (offsetY-this.start.y) + "px"; } }, mouseup: function(e) { @@ -804,7 +807,10 @@ Vue.component('my-game', { e = e || window.event; // Read drop target (or parentElement, parentNode... if type == "img") this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coordinates - let landing = document.elementFromPoint(e.clientX, e.clientY); + const [offsetX,offsetY] = !!e.clientX + ? [e.clientX,e.clientY] + : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; + let landing = document.elementFromPoint(offsetX, offsetY); this.selectedPiece.style.zIndex = 3000; while (landing.tagName == "IMG") //classList.contains(piece) fails because of mark/highlight landing = landing.parentNode;