[FRAGE] JavaScript - Puzzle Funktioniert nicht

[Transformator]

Hallo Leute,
Ich habe ein Puzzle entwickelt !
aber leider Funktioniert es nicht !
Könnt ihr mir vieleicht helfen ?

Das Problem :
Das Problem ist das wenn man im Puzzle objekte verzieht diese nicht dort eigefügt
werden ! (das ganze ist per Drag and Drop geregelt)

Ich glaube es liegt daran das ich den Code nicht ganz verstehe !
Ich habs von hier : HTML5 Drag and Drop
Hier das ganze zum anschauen : scharnofske.de/puzzle
Code : [HTML 5] draganddroppuzzle - Pastebin.com

--------------------------------------------------------------
Wer mir da oben nicht helfen kann, ich hab noch ne kleine frage :
Wie erstellt man per JS objekte im document ? das geht doch irgentwie mit jquery oder ???

 

[kkapsner]

Du hast da nirgends ein ondrop-Event...

PS: Man kann auch mit nativem JS DOM-Objekte erstellen: document.createElement()

 

[Transformator]

Du hast da nirgends ein ondrop-Event...

Eigentlich schon :

ondrop="drop(event)"

Habe allerdings in der gleichen zeile einen fehler gefunden
Funktioniert aber immer noch nicht

 

[Transformator]

Anhangsfrage :
Was ist an diesem Code Falsch ???

document.body.onload = loadContent();

function loadContent() {
	var newDiv = null;
	var sideloader = null;

	var newDiv = document.createElement("div");

	var ondragover = document.createAttribute("ondragover");
	ondragover.nodeValue = "allowDrop(event)";

	var ondrop = document.createAttribute("ondrop");
	ondrop.nodeValue = "drop(event)";

	newDiv.setAttributeNode(ondragover);
	newDiv.setAttributeNode(ondrop);

	sideloader = document.getElementById("sideloader");
	document.body.insertBefore(newDiv, sideloader);
}

 

[Transformator]

Ist der fehler vieleicht hier :

function drop(ev)
{
	ev.preventDefault();
	var data = ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
}

????

 

[mikdoe]

In der Console taucht kein Fehler auf?

 

[Transformator]

Ja, Jetz schon ich hab so lange rumexperimentiert bis einer aufgetaucht ist :

Uncaught NotFoundError: failed to execute 'appendChild' on 'Node' : The new child element is null

der code auf den sich das ganze bezieht :

function allowDrop(ev)
{
	ev.preventDefault();
}

function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
	ev.preventDefault();
	var data = ev.dataTransfer.getData("Text");

	ev.target.appendChild(document.getElementById(data)); // HIER !
}

 

[Transformator]

PROBLEM FOUND !!!!

BESTE FEHLER EVVER ! 1 ; ZU VIEL !

lol !

Richtig :

<div ondrop="drop(event)" ondragover="allowDrop(event)" data-type="puzzle"><img id="teil11" ondragstart="drag(event)" dragable="true" src="puzzle/teil11.png"></div>

Falsch :

<div ondrop="drop(event)" ondragover="allowDrop(event)" data-type="puzzle"><img id="teil11" ondragstart="drag(event);" dragable="true" src="puzzle/teil11.png"></div>

 

[tsseh]

PROBLEM FOUND !!!!

no i don't think so

document.body.onload = loadContent();

this is a function call

 

[Transformator]

FUNKTIONIERT aber trotzdem !

 

[tsseh]

FUNKTIONIERT aber trotzdem !

mag sein, liegt aber nicht an dem semikolon

 

[kkapsner]

document.createAttribute() für einen Eventlistener ist jetzt nicht wirklich dein Ernst... sowas macht man eleganter/sicherer/stabiler/kürzer so:

function loadContent(){
	var newDiv = document.createElement("div");
	newDiv.ondragover = function(ev){
		allowDrop(ev || event);
	};
	newDiv.ondrop = function(ev){
		drop(ev || event);
	};

	var sideloader = document.getElementById("sideloader");
	document.body.insertBefore(newDiv, sideloader);
}

PS: das Semikolon kann dein Problem auf keinen Fall erzeugt haben. Du musst da noch etwas anderes geändert haben.

 

[Transformator]

IHR habt recht,

Ich habe den bildern gleichzeitig auch ne id gegeben ^^
wie soll das den ohne id functionineren :

ev.target.appendChild(document.getElementById(data))

Die ID wird zwar ausgelesen aber was soll da den ausgelesen werden ?

NUN, gleich das nächste problem :

Wenn ihr mit meinem Puzzle rumprobiert, (scharnofske.de/puzzle)

Werdet ihr merken das Puzzleteile gelöscht werden wenn man sie übereinander zieht

Warum ? oder wie kann man das verhindern ???

DANKE FÜR EUERE ZEIT !

 

[kkapsner]

Die Puzzleteile werden nicht gelöscht, sondern als Kind in dem schon vorhandenen <img> eingebaut und deswegen nicht mehr angezeigt.

Um das zu lösen darfst du in deiner drop Funktion nicht auf event.target zugreifen (wenn du über dem <img> loslässt, ist das <img> das .target), sondern machst am besten einen zweiten Parameter:

function drop(ev, dropZone){
	ev.preventDefault();
	var data = ev.dataTransfer.getData("Text");

	dropZone.appendChild(document.getElementById(data));
}

ondrop="drop(event, this)"

PS: Inline Eventlistener sind nicht wirklich elegant/wartungsfreundlich/modern/etc. besser wäre es, wenn du die Events auch im JS registrieren würdest.
PPS: Öffnende geschweifte Klammern sollte man in JS besser nicht in eine neue Zeile setzten.
PPPS: Wenn man keinen Monsterbildschirm hat, bekommt man einen unschönen Zeilenumbruch und die Puzzleteile sieht man auch nicht wirklich gut.