add touch devices management for drag and drop

diff --git a/web/briskin5/dom-drag.js b/web/briskin5/dom-drag.js
index 06cbc4f..8599615 100644 (file)
--- a/web/briskin5/dom-drag.js
+++ b/web/briskin5/dom-drag.js
@@ -37,6 +37,7 @@ var Drag = {
        init : function(o, mouseup_cb, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)\r
        {\r
                o.onmousedown   = Drag.start;\r
+               o.ontouchstart  = Drag.start;\r
                o.mouseup_cb    = mouseup_cb;\r
 \r
                /*              alert("agnulla"+o.style.left); */\r
@@ -92,40 +93,76 @@ var Drag = {
 \r
                var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);\r
                var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );\r
-               o.root.onDragStart(x, y);\r
 \r
-               o.lastMouseX    = e.clientX;\r
-               o.lastMouseY    = e.clientY;\r
+                var clientX = 0;\r
+                var clientY = 0;\r
+\r
+                if (e.type == 'mousedown') {\r
+                   o.root.onDragStart(x, y);\r
+                    clientX = e.clientX;\r
+                    clientY = e.clientY;\r
+                }\r
+                else {\r
+                    var touch = event.targetTouches[0];\r
+                   clientX = touch.pageX;\r
+                   clientY = touch.pageY;\r
+                }\r
+               o.lastMouseX    = clientX;\r
+               o.lastMouseY    = clientY;\r
 \r
                if (o.hmode) {\r
-                       if (o.minX != null)     o.minMouseX     = e.clientX - x + o.minX;\r
+                       if (o.minX != null)     o.minMouseX     = clientX - x + o.minX;\r
                        if (o.maxX != null)     o.maxMouseX     = o.minMouseX + o.maxX - o.minX;\r
                } else {\r
-                       if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;\r
-                       if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;\r
+                       if (o.minX != null) o.maxMouseX = -o.minX + clientX + x;\r
+                       if (o.maxX != null) o.minMouseX = -o.maxX + clientX + x;\r
                }\r
 \r
                if (o.vmode) {\r
-                       if (o.minY != null)     o.minMouseY     = e.clientY - y + o.minY;\r
+                       if (o.minY != null)     o.minMouseY     = clientY - y + o.minY;\r
                        if (o.maxY != null)     o.maxMouseY     = o.minMouseY + o.maxY - o.minY;\r
                } else {\r
-                       if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;\r
-                       if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;\r
+                       if (o.minY != null) o.maxMouseY = -o.minY + clientY + y;\r
+                       if (o.maxY != null) o.minMouseY = -o.maxY + clientY + y;\r
                }\r
 \r
-               document.onmousemove    = Drag.drag;\r
-               document.onmouseup      = Drag.end;\r
-\r
-               return false;\r
+          if (e.type == 'mousedown') {\r
+            console.log('here assign mouse move');\r
+           document.onmousemove = Drag.drag;\r
+           document.onmouseup  = Drag.end;\r
+          }\r
+          else {\r
+            console.log('here assign touch move');\r
+                   document.ontouchmove = Drag.drag;\r
+                   document.ontouchend = Drag.end;\r
+                }\r
+\r
+          //if (e.type != 'mousedown') {\r
+          //          e.preventDefault();\r
+          //      }\r
+         return false;\r
        },\r
 \r
        drag : function(e)\r
-       {\r
+  {\r
+    console.log('drag: begin');\r
+    \r
                e = Drag.fixE(e);\r
                var o = Drag.obj;\r
 \r
-               var ey  = e.clientY;\r
-               var ex  = e.clientX;\r
+                var ex = 0;\r
+               var ey = 0;\r
+    \r
+    if (e.type == 'mousemove') {\r
+      ex = e.clientX;\r
+      ey = e.clientY;\r
+    }\r
+    else {\r
+      var touch = event.targetTouches[0];\r
+      ex = touch.pageX;\r
+      ey = touch.pageY;\r
+    }\r
+\r
                var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);\r
                var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );\r
                var nx, ny;\r
@@ -159,14 +196,17 @@ var Drag = {
                // alert("END");\r
                if (o.mouseup_cb != null) {\r
                    if (o.mouseup_cb(o) == 1) {\r
-                       o.onmousedown = null;\r
+                     o.onmousedown = null;\r
+                      o.ontouchstart = null;\r
                    }\r
                }\r
 \r
                document.onmousemove = null;\r
                document.onmouseup   = null;\r
-               Drag.obj.root.onDragEnd(        parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), \r
-                                                                       parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));\r
+               document.ontouchmove = null;\r
+               document.ontouchend  = null;\r
+               Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), \r
+                                       parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));\r
                Drag.obj = null;\r
        },\r
 \r