Clanintern Clanintern Clanintern

Forum

Öffentliche Foren
ZURÜCK
FORUM: Spiele & Computer THEMA: JS appendChild() ?
AUTOR BEITRAG
Solid

RANG Deckschrubber

#1 - 07.11 13:42

Hallo!

Ich bau mir derzeit ne Datei in der ich per Drag & Drop Elemente aus ner Liste in eine Box schieben kann, nich mehr nicht weniger soll es können.
Per selfhtml etc. habe ich nun schon folgendes konstruiert:

-----------

<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
<!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4

//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;

// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;

// Mausposition
var posx = 0;
var posy = 0;


function draginit() {
// Initialisierung der Überwachung der Events

document.onmousemove = drag;
document.onmouseup = dragstop;
}


function dragstart(element) {
//Wird aufgerufen, wenn ein Objekt bewegt werden soll.

dragobjekt = element;
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
}


function dragstop() {
/**Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll
**/
if(dragobjekt!=null && dragobjekt.offsetLeft>300 && dragobjekt.offsetLeft<400 && dragobjekt.offsetTop>200 && dragobjekt.offsetTop<300) document.getElementById("dropzone").appendChild(dragobjekt);
dragobjekt=null;
}


function drag(ereignis) {
//Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.

posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;
if(dragobjekt != null) {
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
}
}
//-->
</script>
</head>
<body onload="draginit()">
<div id="dropzone" style="position:absolute;top:200px;left:300px;height:100px;width:100px; border:1px dashed;"> </div>
<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;"> Username </div>
</body>
</html>

-------------

Wie man sehen kann (bei mir zumindest hoffe bei euch auch!) klappt das mit dem aufheben und loslassen des Objektes schon wunderbar.
Ich hatte vorher auch schon per innerHTML es hinbekommen das er das richtige zu verschiebende Wort in die Box einträgt, NUR das ging dann mehrmals mit dem einen Wort (das alte verschwand nicht).

Nun dachte ich mir ich häng per appendChild() einfach das dragobjekt in die divbox dropzone... klappt aber nicht (wäre auch zu schön am wahr zu sein hehe).

Woran liegts?

Wie bekomm ich es hin das er das dragobjekt schön in die Box packt es dragbar bleibt (alles eigenschaften behält) und es aber auch nicht doppelt ist oder so?

Wäre für jede Hilfe dankbar :)
ZURÜCK