Drag and Drop Javascript Puzzle

Ich versuche, einige alte Code wiederbeleben, die ich habe, die ein Puzzle ist. Es lädt Bilder (Puzzleteile) aus einem Ordner, platziert sie zufällig auf der Seite und zieht sie dann auf das Board. Das hat früher funktioniert, aber als ich es heute benutzt habe, wirft es nur Fehler (siehe unten).Drag and Drop Javascript Puzzle

HTML:

<body onload="init();" onmousemove="initDrag();" onmouseup="mousePress=false;"> 
    <div id="main"> 
    <div id="inside"> 
     <img src="holder.gif" style="position:absolute; left:500; top:500;" /> 
    </div> 
    </div> 
    <div style="position:absolute;top:10px;left:600px;display:none;"> 
    </div> 
    <p id="pText" class="congrats" style="position:absolute; top:410px; left:475px;"></p> 
    <p style="position:absolute; top:20px; left:750px;" class="links"><a href="hard.html">hard puzzle</a> | <a href="main.html">home</a></p> 
</body>

Javascript:

// ARRAY FOR PLACEMENT OF IMAGES: [down, over] 
var place = new Array([51,300],[51,432],[51,569],[51,707],[112,300],[112,432],[112,569],[112,707],[199,300],[199,432],[199,569],[199,707],[286,300],[286,432],[286,569],[286,707]); 

var displayed = new Array(); 
var mousePress = false; 
var pieces = place.length; 
var placed = new Array(); 

var moveObject; 

function init() { 
    var append = ""; 
    for (i=0; i<pieces; i++) 
    { 
     append+= '<div onDrag="return false;" unselectable=on id="puzzle" name="puzzle" class="puzzleMain"><img src="img/us/img' + i + '.gif" onmousedown="mousePress=true;moveObject=' + i + ';if(document.all) {offsetX=window.event.offsetX;offsetY=window.event.offsetY;}" onmouseup="mousePress=false;doplace(' + i + ');"></div>'; 
     displayed[i] = 0; 
     placed[i]=0; 
    } 
    document.getElementById("main").innerHTML += append; 
    document.images[i].onload = rndmImg; 
} 

function rndmImg() { 
    x=855;y=50; 
    do { 
     do { 
      displayNext = Math.floor(Math.random()* pieces); 
     } while(displayed[displayNext]); 
     document.getElementsByName("puzzle")[displayNext].style.top = y; 
     document.getElementsByName("puzzle")[displayNext].style.left = x; 
     document.getElementsByName("puzzle")[displayNext].style.visibility="visible"; 
     displayed[displayNext]=1; 
     x += document.images[displayNext].width; 
     if(x >= 900) { 
      y += document.images[displayNext].height; 
      if (y>=300) { x=0 } else { x=851 } 
     } 
    } while(!allDisplayed()); 
} 

function allDisplayed() { 
    for(z=0; z<displayed.length; z++) if(!displayed[z]) return false; 
    return true; 
} 

function lower() { 
    for(p=0;p<document.getElementsByName("puzzle").length;p++) 
    document.getElementsByName("puzzle")[p].style.zIndex = 1; 
    document.getElementsByName("puzzle")[moveObject].style.zIndex=5; 
} 

function initDrag(e) { 
    if(!mousePress)return; 
    if(document.getElementById("inside").innerHTML != "") document.getElementById("inside").innerHTML = ""; 
    lower(); 
    if(document.all) { 
     mouseX = window.event.clientX - (offsetX); 
     mouseY = window.event.clientY - (offsetY); 
    } else { 
     mouseX = e.clientX - 50; 
     mouseY = e.clientY - 50; 
    } 
    document.getElementsByName("puzzle")[moveObject].style.top=mouseY; 
    document.getElementsByName("puzzle")[moveObject].style.left=mouseX; 
    return false; 
} 

function doplace(index) { 
    w = document.images[index].width; 
    h = document.images[index].height; 
    t = parseInt(document.getElementsByName("puzzle")[index].style.top); 
    l = parseInt(document.getElementsByName("puzzle")[index].style.left); 

    if ((l >= place[index][1]-(w/2) && l <= place[index][1]+(w/2)) && (t >= place[index][0]-(h/2) && t <= place[index][0] + (h/2))) 
    { 
     document.getElementsByName("puzzle")[index].style.top = place[index][0]; 
     document.getElementsByName("puzzle")[index].style.left = place[index][1]; 
     placed[index] = 1; 
     if(isComplete()) 
      pText.innerHTML = "Puzzle is complete!"; 
    } 

} 

function generateArray() 
{ 
    append="var place = new Array("; 
    for(i=0; i<document.getElementsByName("puzzle").length; i++) 
    { 
     t = document.getElementsByName("puzzle")[i].style.pixelTop; 
     l = document.getElementsByName("puzzle")[i].style.pixelLeft; 
     append+="[" + t + "," + l + "],"; 
    } 
    document.forms[0].mArray.value = append; 
} 

function isComplete() 
{ 
    for(q=0;q<placed.length;q++) if(!placed[q])return false; 
    return true; 
}

Der Fehler ich meistens ist: Uncaught Typeerror: kann Eigenschaft 'clientX' undefinierter bei initDrag lesen (easy.html: 70) bei HTMLBodyElement.onmousemove (easy.html: 116)

Ich habe eine JSFiddle here. Kann jemand etwas Licht auf das Thema werfen?

Quelle

2017-11-15 joshmerd

Verwenden Sie das übergebene Ereignisobjekt ('e'), anstatt sich auf das globale Ereignisobjekt zu verlassen. Es ist nicht in allen Browsern implementiert. Wenn du alte IEs wirklich unterstützen willst, überprüfe das 'e' anstelle von' document.all'. Ex. In FF wird 'document.all' unterstützt, das globale Event-Objekt jedoch nicht. – Teemu

In Ihrem Code haben Sie onmousemove="initDrag();" also, wenn document.all ist falsy dann mouseX = e.clientX - 50 eine Cannot read property 'clientX' of undefined werfen würde, weil Sie initDrag() ohne Argument auf Mausbewegung nennen.

Jetzt gilt, dass Sie weder document.all noch window.event verwenden sollten, beide sind Relikte.

Quelle

2017-11-15 05:36:03

Das ist die Antwort. Es funktioniert gut unter IE 6, 7 und 8 (über IE-Emulation). Ich werde an der Aktualisierung des alten Codes arbeiten. Vielen Dank! – joshmerd

@joshmerd Ist es erforderlich IE 6, 7 und 8 zu unterstützen? Ich würde keine Unterstützung für diejenigen in neuen Projekten anbieten. Ich würde sogar IE 9 ausschließen. –

Nein, überhaupt nicht. Ich habe gerade einen alten Code durchgegangen und bin auf dieses kleine Projekt gestoßen, das ich vor einiger Zeit gemacht hatte. – joshmerd

Drag and Drop Javascript Puzzle

Antwort

Verwandte Themen