Touch events

krzikalla · Nov 13, 2024 · 0ad3fcc · 0ad3fcc
1 parent 05db7a0
commit 0ad3fcc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/css/style.css b/css/style.css
@@ -64,6 +64,7 @@
   background-color: rgba(256,256,256,10);
   z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
   cursor: pointer; /* Add a pointer on hover */
+  user-select: none;
 }
 
 .grid-item {
@@ -72,19 +73,23 @@
   font-size: 30px;
   text-align: center;
   aspect-ratio: 1;
+  user-select: none;
 }
 
 .element-image {
   width:100%;
   height:100%;
+  user-select: none;
 }
 
 td {
   font-size: 40px;
   text-align: right;
   min-width: 1em;
+  user-select: none;
 }
 
 table {
   margin-left: 40px;
+  user-select: none;
 }
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
         <iframe width=100% height=100% src="regeln.htm" id="helpframe" onload="iframeclick()"></iframe> 
     </div>
     <div class="page-container">
-            <div class="grid-container" id="quellen" ondrop="quellen_drop(event)" ondragover="quellen_allowDrop(event)">
+            <div class="grid-container" id="quellen" ondrop="quellen_drop(event)" ontouchend="quellen_drop(event)" ontouchmove="quellen_allowDrop(event)" ondragover="quellen_allowDrop(event)">
             <div class="grid-item"><img data-value=0 id="d0" class="element-image" src="img/RechtsUnten.png" /></div>
             <div class="grid-item"><img data-value=0 id="d1" class="element-image" src="img/Rechts.png" style="transform:rotate(90deg);" /></div>
             <div class="grid-item"><img data-value=0 id="d2" class="element-image" src="img/Rechts.png" style="transform:rotate(90deg);" /></div>  
@@ -52,10 +52,10 @@
         </div>
         <div class="finder-container" id="finder" data-marked-finder="">
             <button onclick="rerollFinder()" id="finder-button">Finder würfeln</button>
-            <div class="grid-item"><img data-value=0 ondragstart="startDrag(event)" id="f0" class="element-image finder" src="img/Empty.png" /></div>
-            <div class="grid-item"><img data-value=0 ondragstart="startDrag(event)" id="f1" class="element-image finder" src="img/Empty.png" /></div>
-            <div class="grid-item"><img data-value=0 ondragstart="startDrag(event)" id="f2" class="element-image finder" src="img/Empty.png" /></div>
-            <div class="grid-item"><img data-value=0 ondragstart="startDrag(event)" id="f3" class="element-image finder" src="img/Empty.png" /></div>
+            <div class="grid-item"><img data-value=0 ondragstart="startDrag(event)" ontouchstart="startDrag(event)" id="f0" class="element-image finder" src="img/Empty.png" /></div>
+            <div class="grid-item"><img data-value=0 ondragstart="startDrag(event)" ontouchstart="startDrag(event)" id="f1" class="element-image finder" src="img/Empty.png" /></div>
+            <div class="grid-item"><img data-value=0 ondragstart="startDrag(event)" ontouchstart="startDrag(event)" id="f2" class="element-image finder" src="img/Empty.png" /></div>
+            <div class="grid-item"><img data-value=0 ondragstart="startDrag(event)" ontouchstart="startDrag(event)" id="f3" class="element-image finder" src="img/Empty.png" /></div>
             <button onclick="rerollFieldClicked()">Komplettes Feld neu würfeln</button>
             <button onclick="help()">Hilfe</button>
         </div>