From 0e5b2ad16520270df2e2b21751ef4d57df17355d Mon Sep 17 00:00:00 2001 From: Adele de Saint Guilhem Date: Sun, 14 Apr 2024 20:38:03 +0100 Subject: [PATCH] figured out how to improve cliking/dragging issue, still working on putting pieces back. Started adding 3rd puzzle --- interactive1.js | 23 +++++--- interactive2.js | 8 ++- interactive3.js | 66 +++++++++++++++++++++++ style.css | 139 ++++++++++++++++++++++++++++++++++++++++-------- 4 files changed, 207 insertions(+), 29 deletions(-) diff --git a/interactive1.js b/interactive1.js index 668c8ff..f424454 100644 --- a/interactive1.js +++ b/interactive1.js @@ -110,7 +110,7 @@ Instead I need to use touch start, move and end. As such, to make my code as cle Since event listeners can take 2 parameters, I am creating two events listeners. Each take either drag or touch event as a firt parameter along with calling the appropriate function that will handle their common logic and account for their differences.*/ let draggableImages = document.getElementsByClassName("images"); -let originalPlace = document.getElementsByClassName("piece"); +let piece = document.getElementsByClassName("piece"); var globalDraggedItemId = null; // set data and get data are methods that do not exist for touch events. Creating global variable to maintain state. function handleStart(e) { @@ -128,6 +128,10 @@ function handleStart(e) { function handleOverMove(e){ e.preventDefault(); e.stopPropagation(); + let draggedImage = e.currentTarget; + draggedImage.style.zIndex = 1000; // Without giving high index to the images and low to their divs, clicking on images didnt work if a div was above it. + let originalContainer = draggedImage.parentElement; + originalContainer.style.zIndex = 1; } function handleDropEnd(e) { //modify this function with some sort of if statement so that no bug with touch event. (what is hapenign is that the img are otherwise already nested in a drop and cant be moved to drop zones) @@ -161,14 +165,19 @@ Array.from(dropZone).forEach(function(zone){ zone.addEventListener('touchend', handleDropEnd); }); - /*This works for drag but for touch, I need to do some sort of if else statement so the browser detects the correct dropzones/original. - Array.from(originalPlace).forEach(function(place){ - place.addEventListener('dragover', handleOverMove); - place.addEventListener('touchmove', handleOverMove); - place.addEventListener('drop', handleDropEnd); - place.addEventListener('touchend', handleDropEnd); + //This works for drag but for touch, I need to do some sort of if else statement so the browser detects the correct dropzones/original. + /*Array.from(piece).forEach(function(pieces){ + if (pieces.querySelector('img') === null){ + console.log(pieces); + pieces.addEventListener('dragover', handleOverMove); + pieces.addEventListener('touchmove', handleOverMove); + pieces.addEventListener('drop', handleDropEnd); + pieces.addEventListener('touchend', handleDropEnd); + } }); */ + + // V. Finish message let correctPosition = { // creating an object using individual ids created earlier. img0: "drop-0", diff --git a/interactive2.js b/interactive2.js index bda478d..5abb6c1 100644 --- a/interactive2.js +++ b/interactive2.js @@ -114,7 +114,6 @@ document.addEventListener('DOMContentLoaded', function () { }); - let draggableImages = document.getElementsByClassName("images"); //let originalPlace = document.getElementsByClassName("piece2"); var globalDraggedItemId = null; @@ -134,6 +133,10 @@ function handleStart(e) { function handleOverMove(e){ e.preventDefault(); e.stopPropagation(); + let draggedImage = e.currentTarget; + draggedImage.style.zIndex = 1000; + let originalContainer = draggedImage.parentElement; + originalContainer.style.zIndex = 1; } function handleDropEnd(e) { @@ -210,6 +213,9 @@ function checkPosition() { alert("You are almost there! But some pieces are in the wrong place."); }, 500); } else if (allPlaced && allCorrect) { + Array.from(dropZone).forEach(function(drop){ //purely aesthetics considerations, otherwise, we would see the borders + drop.style.border = "none"; + }) setTimeout(() => { alert("Congratulations! You completed the puzzle."); }, 500); diff --git a/interactive3.js b/interactive3.js index e69de29..a8f794d 100644 --- a/interactive3.js +++ b/interactive3.js @@ -0,0 +1,66 @@ +let puzzleContainer = document.getElementById("puzzle-container"); + +function creatingGrid() { + let rows = 4; + let columns = 4; + + for(let i=0; i