таблица перетаскивания с изменением ориентации - PullRequest
0 голосов
/ 21 апреля 2020

Я пытаюсь создать игру порядка слов, в которой слова появляются случайным образом на экране, а пользователь должен перетаскивать слова по порядку в поля. Он прекрасно работает на экране компьютера, а также на портретном экране телефона. Однако при изменении на ландшафт все цели отключены. Я не уверен, что таблица загружается неправильно или, возможно, это информация. в массивах. Протестировано на Pixel 3

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
     <?!= include('Stylesheet'); ?>
  </head>
  <body>
   <?!= include('MouseScript'); ?>
   <?!= include('JavaScript'); ?>

<div id="wrapper">

<table>

<th>Sentence 1</th>
<tr id=rowOne>
    <td  class="draggable-item" id="sOneOne" draggable="true" tag="oneOne">Every</td>
    <td  class="draggable-item" id="sOneTwo" draggable="true" tag="oneTwo">fingerprint</td>
    <td  class="draggable-item" id="sOneThree" draggable="true" tag="oneThree">is</td>
    <td class="draggable-item"  id="sOneFour" draggable="true" tag="oneFour">different.</td>
 </tr>
 <tr>
    <td class="drop-area" id="oneOneCell"></td>
    <td class="drop-area" id="oneTwoCell"></td>
    <td class="drop-area" id="oneThreeCell"></td>
    <td class="drop-area" id="oneFourCell"></td>
  </tr>

   <th>Sentence 2</th>
    <tr id=rowTwo>
    <td class="draggable-item" id="sTwoOne" draggable="true" tag="twoOne">Dr. John Daughman</td>
    <td class="draggable-item" id="sTwoTwo"draggable="true" tag="twoTwo">studies</td>
    <td class="draggable-item" id="sTwoThree" draggable="true" tag="twoThree">her</td>
    <td class="draggable-item" id="STwoFour" draggable="true" tag="twoFour">eyes.</td>
  </tr>
  <tr>
    <td class="drop-area" id="twoOneCell"></td>
    <td class="drop-area" id="twoTwoCell"></td>
    <td class="drop-area" id="twoThreeCell"></td>
    <td class="drop-area" id="twoFourCell"></td>
  </tr>

  <th>Sentence 3</th>
    <tr id=rowThree>
    <td class="draggable-item" id="sThreeOne" draggable="true" tag="threeOne">He</td>
    <td class="draggable-item" id="sThreeTwo"draggable="true" tag="threeTwo">finds</td>
    <td class="draggable-item" id="sThreeThree" draggable="true" tag="threeThree">their</td>
    <td class="draggable-item" id="sThreeFour" draggable="true" tag="threeFour">special</td>
    <td class="draggable-item" id="sThreeFive" draggable="true" tag="threeFive">pattern.</td>
  </tr>
  <tr>
    <td class="drop-area" id="threeOneCell"></td>
    <td class="drop-area" id="threeTwoCell"></td>
    <td class="drop-area" id="threeThreeCell"></td>
    <td class="drop-area" id="threeFourCell"></td>
    <td class="drop-area" id="threeFiveCell"></td>
  </tr>

   <th>Sentence 4</th>
    <tr id=rowFour>
   <td class="draggable-item" id="sFourOne" draggable="true" tag="fourOne">Eyes</td>
   <td class="draggable-item" id="sFourTwo"draggable="true" tag="fourTwo">can</td>
   <td class="draggable-item" id="sFourThree" draggable="true" tag="fourThree">look</td>
   <td class="draggable-item" id="sFourFour" draggable="true" tag="fourFour">similar.</td>
  </tr>
  <tr>
    <td class="drop-area" id="fourOneCell"></td>
    <td class="drop-area" id="fourTwoCell"></td>
    <td class="drop-area" id="fourThreeCell"></td>
    <td class="drop-area" id="fourFourCell"></td>
  </tr>

   <th>Sentence 5</th>
    <tr id=rowFive>
    <td class="draggable-item" id="sFiveOne" draggable="true" tag="fiveOne">She</td>
    <td class="draggable-item" id="sFiveTwo"draggable="true" tag="fiveTwo">is</td>
    <td class="draggable-item" id="sFiveThree" draggable="true" tag="fiveThree">the</td>
    <td class="draggable-item" id="sFiveFour" draggable="true" tag="fiveFour">girl</td>
    <td class="draggable-item" id="sFiveFive" draggable="true" tag="fiveFive">in</td>
    <td class="draggable-item" id="sFiveSix" draggable="true" tag="fiveSix">the</td>
    <td class="draggable-item" id="sFiveSeven" draggable="true" tag="fiveSeven">picture.</td>       
  </tr>
  <tr>
    <td class="drop-area" id="fiveOneCell"></td>
    <td class="drop-area" id="fiveTwoCell"></td>
    <td class="drop-area" id="fiveThreeCell"></td>
    <td class="drop-area" id="fiveFourCell"></td>
    <td class="drop-area" id="fiveFiveCell"></td>
    <td class="drop-area" id="fiveSixCell"></td>
    <td class="drop-area" id="fiveSevenCell"></td>
  </tr>
</table>
<p id="demo">Put The Words In Order</p>

<button type="button"id="button">Click Me!</button>
</div>

 </body>
</html>

<!DOCTYPE html>
<html>
  <head>
  <base target="_top">

  </head>
  <body>



  </body>

 <style>
 body {
  background: #ccc;
  height:  100%;
    margin:  0px auto;
    padding: 0px auto;
}

#demo {
  color: green;
}

.draggable-item {
text-align: center;
width: 100px;
height: 20px;
padding: 5px;
background: #fff;
box-sizing: border-box;
}

.draggable-item.animatable {
  transition: transform linear 400ms, opacity linear 400ms;
}

.draggable-item.active {
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  will-change: transform;
  z-index: 1;
}

.keeper {
  opacity: 0;
}

.drop-area {
  width: 100px;
  padding: 5px;
  height: 20px;
  position: relative;
  background: lightblue;
}

.drop-area:after {
  position: absolute;
  width: 100%;
  height: 100%;

  content: '';
  border: 1px dashed black;
  box-sizing: border-box;
  opacity: 0;
  top: 0;
  left: 0;
}

.drop-area.affordance:after {
  opacity: .3;
  position: absolute;

}

.drop-area.affordance.active:after {
  opacity: 1;
}

</style>
</html>
    document.addEventListener("DOMContentLoaded", function(event) { 

    var rowOne = document.getElementById("rowOne");
    var rowOneM = rowOne.querySelectorAll("td");
    var rowOneA = Array.from(rowOneM);

    var rowTwo = document.getElementById("rowTwo");
    var rowTwoM = rowTwo.querySelectorAll("td");
    var rowTwoA = Array.from(rowTwoM);

    var rowThree = document.getElementById("rowThree");
    var rowThreeM = rowThree.querySelectorAll("td");
    var rowThreeA = Array.from(rowThreeM);

    var rowFour = document.getElementById("rowFour");
    var rowFourM = rowFour.querySelectorAll("td");
    var rowFourA = Array.from(rowFourM);

    var rowFive = document.getElementById("rowFive");
    var rowFiveM = rowFive.querySelectorAll("td");
    var rowFiveA = Array.from(rowFiveM);

    function shuffle(array) {
      var currentIndex = array.length, temporaryValue, randomIndex;

      while (0 !== currentIndex) {

        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

      return array;
    }

    shuffle(rowOneA);
    shuffle(rowTwoA);
    shuffle(rowThreeA);
    shuffle(rowFourA);
    shuffle(rowFiveA);

    for (i = 0; i < rowOneA.length; i++) {

    rowOne.appendChild(rowOneA[i]);

    }
    for (i = 0; i < rowTwoA.length; i++) {

    rowTwo.appendChild(rowTwoA[i]);

    }
    for (i = 0; i < rowThreeA.length; i++) {

    rowThree.appendChild(rowThreeA[i]);

    }
    for (i = 0; i < rowFourA.length; i++) {

    rowFour.appendChild(rowFourA[i]);

    }
    for (i = 0; i < rowFiveA.length; i++) {

    rowFive.appendChild(rowFiveA[i]);

    }

    document.addEventListener("dragstart", function(event) {
      event.dataTransfer.setData("Text", event.target.id);
      event.dataTransfer.setData("Tag", event.target.getAttribute('tag'));


          event.target.style.opacity = "0.4";
    });
    document.addEventListener("drag", function(event) {
      });


    document.addEventListener("dragend",function(event) {

      event.target.style.opacity = "1";  
    });


    document.addEventListener ("dragenter", function (event) {


        if ( event.target.id.includes("Cell")) {
        event.target.style.border = "3px dotted red";   
     }

    });
    document.addEventListener("dragover", function(event) {
      event.preventDefault();
    });

    document.addEventListener("dragleave", function(event) {


     if ( event.target.id.includes("Cell")) {
        event.target.style.border = "";   
     }

    });


    document.addEventListener("drop", function(event) {
      event.preventDefault();

      var data = event.dataTransfer.getData("Text");
      var tag = event.dataTransfer.getData("Tag");
      console.log(data);
      console.log(event.target.id);
      if ( event.target.id !== data + "Cell") {
      event.target.style.border = "";
       document.getElementById("demo").style.color = "red";
       document.getElementById("demo").innerHTML = "Try again.";
      }
      if ( event.target.id == tag + "Cell") {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        document.getElementById("demo").innerHTML = "Good Job!";


        event.target.appendChild(document.getElementById(data));

          }
        });

        });
document.addEventListener("DOMContentLoaded", function(event) { 

let draggableItems = document.querySelectorAll('.draggable-item');

let dropAreas = document.querySelectorAll('.drop-area');


let initialX;
let initialY;
let offsetX = 0;
let offsetY = 0;
let startingX;
let startingY;
let targetElement;
let lastActiveDropArea = null;

let createKeeper = function(draggableItem) {

  let draggableItemRect = draggableItem.getBoundingClientRect();
  let keeper = document.createElement('div');

  keeper.classList.add('keeper');
  keeper.style.width = draggableItemRect.width + 'px';
  keeper.style.height = draggableItemRect.height + 'px';

  draggableItem.parentElement.insertBefore(keeper, draggableItem);
};




let isNewActiveArea = function(currentActiveArea, newActiveArea) {
  if(newActiveArea && !currentActiveArea || newActiveArea && currentActiveArea !== newActiveArea) {
    return true;
  }
};





let setLastActiveDropArea = function(targetDropArea) {
  unsetLastActiveDropArea();
  if(targetDropArea && !targetDropArea.classList.contains('active')) {
    targetDropArea.classList.add('active');
    lastActiveDropArea = targetDropArea;
  }
};




let unsetLastActiveDropArea = function() {
  if(lastActiveDropArea && lastActiveDropArea.classList.contains('active')) {
    lastActiveDropArea.classList.remove('active');
    lastActiveDropArea = null;
  }
};

let resetTransitionEndHandler = function() {

  if(this.classList.contains('animatable')) {
  this.classList.remove('animatable');
}

this.removeAttribute('style');

  if(this && this.parentElement && this.parentElement.querySelector('.keeper')) {
  this.parentElement.removeChild(this.parentElement.querySelector('.keeper'));
}

  if(this.classList.contains('active')) {
  this.classList.remove('active');
}
  let dTag = this.attributes[3].nodeValue;
  if(dTag + "Cell" == targetElement.id) {
    lastActiveDropArea.appendChild(this);
    document.getElementById("demo").style.color = "green";
    document.getElementById("demo").innerHTML = "Good Job!";
    }
    else{
    document.getElementById("demo").style.color = "red";
    document.getElementById("demo").innerHTML = "Try again.";
    }
  this.removeEventListener('transitionend', resetTransitionEndHandler);
};

let touchStartHandler = function  touchStartHandler (event) {
  interactionStart(event.target, event.touches[0].pageX, event.touches[0].pageY);
event.preventDefault();
console.log(event);

};

let touchMovetHandler = function(event) {
  interactionMove(event.target, event.touches[0].pageX, event.touches[0].pageY);


};
let touchEndtHandler = function(event) {
  interactionEnd(event.target, event.changedTouches[0].pageX, event.changedTouches[0].pageY);

};

let interactionStart = function(element, coordX, coordY) {

  dropAreas.forEach(function(dropArea) {
    if(!dropArea.classList.contains('affordance')) {
      dropArea.classList.add('affordance');
    }

  });

  let draggableItemRect = element.getBoundingClientRect();

  initialX = coordX;
  initialY = coordY;
  startingX = draggableItemRect.left;
  startingY = draggableItemRect.top;

  element.style.width = draggableItemRect.width + 'px';
  element.style.height = draggableItemRect.height + 'px';
  element.style.transform = "translateX(" + draggableItemRect.left + "px) translateY( " + 
draggableItemRect.top + "px) translateZ(0)";
  element.id = draggableItemRect.id;

  createKeeper(element);

  if(!element.classList.contains('active')) {
    element.classList.add('active');
  }
};

let interactionMove = function(element, coordX, coordY) {

  offsetX = coordX - initialX;
  offsetY = coordY - initialY;

  element.style.transform = "translateX(" + (startingX + offsetX) + "px) translateY(" + (startingY + 
offsetY) + "px) translateZ(0) scale(1)";

  targetElement = document.elementFromPoint(coordX, coordY);

  if(targetElement && targetElement.closest('.drop-area')) {
    targetElement = targetElement.closest('.drop-area');
    setLastActiveDropArea(targetElement);
  } else {
    unsetLastActiveDropArea();
  }
};

let interactionEnd = function(element, coordX, coordY) {

  dropAreas.forEach(function(dropArea) {

    if(dropArea.classList.contains('active')) {
      dropArea.classList.remove('active');
    }

    if(dropArea.classList.contains('affordance')) {
      dropArea.classList.remove('affordance');
    }
  });

  if(!element.classList.contains('animatable')) {
    element.classList.add('animatable');
  }

  if(targetElement && targetElement.classList.contains('drop-area')) {
    element.style.transform = "translateX(" + (startingX + offsetX) + "px) translateY(" + (startingY 
    + offsetY) + "px) translateZ(0) scale(0)";

  } else {
    element.style.transform = "translateX(" + startingX + "px) translateY(" + startingY + "px) 
translateZ(0)";
  }

  element.addEventListener('transitionend', resetTransitionEndHandler);

};


let addEventListeners = function(element) {

  element.addEventListener('touchstart', touchStartHandler);
  element.addEventListener('touchmove', touchMovetHandler);
  element.addEventListener('touchend', touchEndtHandler);
};

draggableItems.forEach(function(draggableItem) {
  addEventListeners(draggableItem);
});

});

...