Mobile fix

index.js

@@ -18,8 +18,10 @@ function makeSpaceWord(word){
     $("#imagesky").html("");
     let length = word.length;
     for (var i = 0; i < length; i++) {
-        $("#lettersky").append('<td><div ondrop="drop(event)" ondragover="allowDrop(event)" class="letterplace finalplace finalletterplace place"></td>');
+        $("#lettersky").append('<td><div ondrop="drop(event)" id="letterko' + ranid +'" finalplaceindex="' + i +'" ondragover="allowDrop(event)" class="letterplace finalplace finalletterplace place"></td>');
-        $("#imagesky").append('<td><div ondrop="drop(event)" ondragover="allowDrop(event)" class="imageplace finalplace finalimageplace place"></td>');
+        ranid++;
+        $("#imagesky").append('<td><div ondrop="drop(event)" id="letterko' + ranid +'" finalplaceindex="' + i +'" ondragover="allowDrop(event)" class="imageplace finalplace finalimageplace place"></td>');
+        ranid++;
     }
     $("#lettersky").append('<td><div id="letterstatus" class="status"></div></td>');
     $("#imagesky").append('<td><div id="imagestatus" class="status"></div></td>');
@@ -126,6 +128,28 @@ function randomize(inarray){
     return tmp;
 }
 
+function getEmptyIndex(element) {
+    var emptyPlaces = [];
+    var idcka = [];
+    var finalindex = -1;
+    var idcko = "";
+   element.each(function (){
+        let thiselement = $(this);
+        if (thiselement.html() == ""){
+            emptyPlaces.push(thiselement.attr("finalplaceindex"));
+            idcka.push(thiselement.attr("id"));
+        }
+    });
+    
+    emptyPlaces.forEach(function (value, index) {
+        if (value < finalindex || finalindex < 0){
+            finalindex = value;
+            idcko = idcka[index];
+        }
+    });
+    return [finalindex, idcko];
+}
+
 function showImages() {
     var images = [];
     var letters = [];
@@ -137,7 +161,7 @@ function showImages() {
         let audiopath = prefix + "audio/" + data_tabl[i] + ".ogg";
         
         images.push(
-            "<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"imageholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place grid-item holderak imageholderak\">" + 
+            "<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"imageholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place originalplace grid-item holderak imageholderak\">" + 
                 "<img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"imagevec\" src=\"" + imagepath + "\">" + 
                     "<audio datacode=\"" + data_tabl[i] + "\" id=\"audplay" + data_tabl[i] + "\">" + 
                         "<source id=\"audioholderak" + ranid + "\" class=\"holderak\" datacode=\"" + data_tabl[i] + "\" src=\"" + audiopath + "\" type=\"audio/ogg\"/>" + 
@@ -147,7 +171,7 @@ function showImages() {
         );
         ranid += 1;
         letters.push(
-            "<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"letterholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place grid-item holderak letterholderak\">" + 
+            "<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"letterholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place originalplace grid-item holderak letterholderak\">" + 
                 "<img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"lettervec\" src=\"" + letterpath + "\" />" + 
             "</div>"
         );
@@ -161,7 +185,32 @@ function showImages() {
         letterholder.append(value);
     });
 
-    $(".imageholderak").each(function(){
+    $(".originalplace").on("click", function(e){
+        let targetElement = $(this);
+        if (targetElement.hasClass("imageholderak")){
+            let [emptyindex, idcko] = getEmptyIndex($(".finalimageplace"), this);
+            if (emptyindex > -1){
+                let changingelement = $("#" + idcko);
+                changingelement.html(targetElement.html());
+            }
+
+        }
+
+        if (targetElement.hasClass("letterholderak")){
+            let [emptyindex, idcko] = getEmptyIndex($(".finalletterplace"), this);
+            if (emptyindex > -1){
+                let changingelement = $("#" + idcko);
+                changingelement.html(targetElement.html());
+            }
+
+        }
+    });
+
+    $(".finalplace").on("click", function (){
+        $(this).html("");
+    });
+
+    $(".imageholderak, .letterholderak").each(function(){
        $(this).on("click", function (e){
             let datacode = $(this).attr("datacode");
             document.getElementById("audplay"+ datacode).play();
@@ -284,9 +333,9 @@ function drop(ev) {
 function droptrash(ev) {
     ev.preventDefault();
     let cntdragx = ev.dataTransfer.getData("cntdrag");
-    //$('[cntdrag="' + cntdragx + '"]').remove();
+    $('[cntdrag="' + cntdragx + '"]').remove();
     let htmldata = ev.dataTransfer.getData("text");
     let returnto = ev.dataTransfer.getData("returnto");
-    //$('[returntarget="' + returnto + '"]').html(htmldata);
+    $('[returntarget="' + returnto + '"]').html(htmldata);
     
 }