Я пытаюсь создать игру порядка слов, в которой слова появляются случайным образом на экране, а пользователь должен перетаскивать слова по порядку в поля. Он прекрасно работает на экране компьютера, а также на портретном экране телефона. Однако при изменении на ландшафт все цели отключены. Я не уверен, что таблица загружается неправильно или, возможно, это информация. в массивах. Протестировано на 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);
});
});