add touch support

zitap/static/zitap/js/mouse-drag.js

@@ -9,18 +9,24 @@ window.addEventListener("load", function()
   const checkables = []
   for (const element of document.getElementsByClassName("checkable"))
   {
-    element.onmousedown = mouseDownHandler
+    element.addEventListener("touchstart", mouseDownHandler, false)
+    element.addEventListener("mousedown", mouseDownHandler, false)
     element.onclick = function(e) { e.preventDefault() }
     if(element.tagName == "INPUT")
       checkables.push(element)
   }
 
-  document.onmousemove = mouseMoveHandler
-  document.onmouseup = mouseUpHandler
+  this.document.addEventListener("mousemove", mouseMoveHandler, false)
+  this.document.addEventListener("touchmove", mouseMoveHandler, false)
+  this.document.addEventListener("mouseup", mouseUpHandler, false)
+  this.document.addEventListener("touchend", mouseUpHandler, false)
 
   function mouseDownHandler(e)
   {
-    dragStart = {x: e.clientX, y: e.clientY}
+    dragStart = {
+      x: e.clientX || e.touches[0].clientX,
+      y: e.clientY || e.touches[0].clientY
+    }
     let currentTarget
     if (e.target.tagName == "INPUT")
     {
@@ -37,6 +43,8 @@ window.addEventListener("load", function()
     originalStates = []
     for (let checkable of checkables)
       originalStates.push(checkable.checked)
+
+    e.preventDefault()
   }
   function mouseUpHandler(e)
   {
@@ -58,10 +66,10 @@ window.addEventListener("load", function()
     
     // get rectangle of dragged area
     let rect = {
-      left: Math.min(dragStart.x, e.clientX),
-      top: Math.min(dragStart.y, e.clientY),
-      right: Math.max(dragStart.x, e.clientX),
-      bottom: Math.max(dragStart.y, e.clientY)
+      left: Math.min(dragStart.x, e.clientX || e.touches[0].clientX),
+      top: Math.min(dragStart.y, e.clientY || e.touches[0].clientY),
+      right: Math.max(dragStart.x, e.clientX || e.touches[0].clientX),
+      bottom: Math.max(dragStart.y, e.clientY || e.touches[0].clientY)
     }
     // draw rectangle
     let rectElement = document.getElementById("rect")
@@ -98,7 +106,7 @@ window.addEventListener("load", function()
         checkable.checked = originalStates[i]
       }
     }
-    
+    e.preventDefault()
   }
 })