resolved: Move cards inside two cards group with one gesture. #20, resolved: MS Pointer Events to properly drag cards on IE touch devices #27

apps/web/priv/static/app/css/main.css

@@ -4,3 +4,9 @@ html, body { -webkit-user-select: none; user-select: none; }
 html, body { margin: 0; padding:0; overflow: hidden; width: 100%; height: 100%; font-family: "Exo 2"; }
 text { cursor: default; }
 .card text { cursor: inherit; }
+.card {
+	-ms-touch-action :    none;
+    touch-action :        none;
+    -ms-scroll-chaining:  none;
+    -ms-scroll-limit:     0 0 0 0;
+}

apps/web/priv/static/app/js/dragndrop.js

@@ -3,6 +3,8 @@ function DragScope(scope) {
 
     var currentDragTarget = null
 
+    var isIE = window.navigator.msPointerEnabled
+
     function calcShift()
     {
         var svgWidth = $svg[0].viewBox.baseVal.width;
@@ -64,15 +66,20 @@ function DragScope(scope) {
             e.preventDefault(), moved || (moved = !1, this.$el.attr("style", "cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;"), 
             this.$el[0].parentNode.appendChild(this.$el[0]), this.x = this.clientX(e), this.y = this.clientY(e), 
             this.trf = this.$el.attr("transform"), this.trf && (this.trf = this.trf.slice(10, -1).split(/\s+/)), 
-            this.storeTrf(), silent || (document.createTouch ? (this.$el.on("touchmove", this.onMove), 
+            this.storeTrf(), silent || (document.createTouch || isIE ? (this.$el.on("touchmove", this.onMove), 
             this.$el.on("touchend", this.onUp)) : ($("body").on("mousemove", this.onMove), $("body").on("mouseup", this.onUp)), 
             this.$el.trigger("dragstart")));
         },
 
         onMove: function(e, silent) {
-            e.preventDefault(), moved = !0, currentDragTarget = this, this.dx = ((this.curX = this.clientX(e)) - this.x) * size, 
-            this.dy = ((this.curY = this.clientY(e)) - this.y) * size, this.trf && (this.dx += 0 | this.trf[0], 
-            this.dy += 0 | this.trf[1]), this.$el.attr("transform", "translate(" + this.dx + " " + this.dy + ")"), 
+            e.preventDefault()
+            moved = !0
+            currentDragTarget = this
+            this.dx = ((this.curX = this.clientX(e)) - this.x) * size, 
+            this.dy = ((this.curY = this.clientY(e)) - this.y) * size
+            this.trf && (this.dx += 0 | this.trf[0], 
+            this.dy += 0 | this.trf[1])
+            this.$el.attr("transform", "translate(" + this.dx + " " + this.dy + ")") 
             silent || this.$el.trigger("dragmove", {
                 detail: {
                     x: this.curX,
@@ -119,7 +126,7 @@ function DragScope(scope) {
                 moved = false
             }
 
-            if(document.createTouch){
+            if(document.createTouch || isIE){
                 this.$el.off('touchmove', this.onMove)
                 this.$el.off('touchend', this.onUp)
             }

apps/web/priv/static/app/js/okey/deck.js

@@ -66,9 +66,14 @@ function DeckScope(scope) {
         track: function(e) {
             this.each(function(card, i, j) {
                 if (card && card.$el[0] != e.target && card.intersect(e.detail.x, e.detail.y) && !card.$el.attr("animated") && scope.Card.selected.length < 2) {
-                    var shift = e.detail.x > card.centerX() ? i + 1 : i - 1;
-                    return shift = shift > 14 ? shift - 2 : shift, shift = 0 > shift ? shift + 2 : shift, 
-                    prevX = i, prevY = j, this.move({ i: i, j: j}, {i: shift, j: j}), !1;
+                    var shift = e.detail.x > card.centerX() ? i - 1 : i + 1
+                    shift = shift > 14 ? shift - 2 : shift
+                    shift = 0 > shift ? shift + 2 : shift
+                    this.move({ i: i, j: j}, {i: shift, j: j})
+                    moved = true
+                    prevX = e.detail.x
+                    prevY = e.detail.y
+                    return !1;
                 }
             });
         },

apps/web/priv/static/app/js/selector.js

@@ -30,6 +30,15 @@ var $ = function(_undefind)
 {
     var isIE = window.navigator.msPointerEnabled
 
+    var ieEventsMap = {
+        'mousedown': 'MSPointerDown',
+        'touchstart': 'MSPointerDown',
+        'mousemove': 'MSPointerMove',
+        'touchmove': 'MSPointerMove',
+        'mouseup': 'MSPointerUp',
+        'touchend': 'MSPointerUp'
+    }
+
     function Selector(elements) {
         this.length = elements.length;
         for (var i = 0, l = this.length; l > i; i++) this[i] = elements[i];
@@ -51,8 +60,22 @@ var $ = function(_undefind)
     var fn = Selector.prototype;
 
     fn.each = function(callback) { for (var i = 0, l = this.length; l > i; i++) callback(this[i], i); return this; },
-    fn.on = function(eventName, eventHandler) { return this.each(function(el) { el.addEventListener(eventName, eventHandler); }); },
-    fn.off = function(eventName, eventHandler) { return this.each(function(el) { el.removeEventListener(eventName, eventHandler); }); },
+    fn.on = function(eventName, eventHandler) {
+        return this.each(function(el) { 
+            if(isIE && ieEventsMap[eventName]){
+                eventName = ieEventsMap[eventName]
+            }
+            el.addEventListener(eventName, eventHandler); 
+        }); 
+    },
+    fn.off = function(eventName, eventHandler) { 
+        return this.each(function(el) {
+            if(isIE && ieEventsMap[eventName]){
+                eventName = ieEventsMap[eventName]
+            }
+            el.removeEventListener(eventName, eventHandler); 
+        }); 
+    },
     fn.trigger = function(eventName, data, raw) { 
         data = data || {}
         return this.each(function(el) {