Noch nicht viel geschrieben
Hallo liebe Forummitglieder,
bin jetzt leider kein Profi in Javascript und benötige Hilfe bei folgendem Problem.
Kurz zum Vorhaben: ich möchte ein kleines Einrichtungstool machen, wo man nach Belieben Gegenstände platzieren kann.
Ich habe bereits mehrere Objekte mittels Array erstellt. Bei den Objekten handelt es sich um Bilder. Der Teil es Drag and Drops funktioniert ohne dem Array (also mit nur einem Bild) einwandfrei. Sobald ich ein Array mit mehreren Objekten mach funktioniert das Drag and Drop nicht. Ich weiß nicht was ich falsch gemacht habe bzw. wo genau der Hacken drinnen steckt.
Ich hoffe es kann mir jemand weiterhelfen und mir ein paar Tipps geben!
Dankeschön schon im Voraus!
bin jetzt leider kein Profi in Javascript und benötige Hilfe bei folgendem Problem.
Kurz zum Vorhaben: ich möchte ein kleines Einrichtungstool machen, wo man nach Belieben Gegenstände platzieren kann.
Ich habe bereits mehrere Objekte mittels Array erstellt. Bei den Objekten handelt es sich um Bilder. Der Teil es Drag and Drops funktioniert ohne dem Array (also mit nur einem Bild) einwandfrei. Sobald ich ein Array mit mehreren Objekten mach funktioniert das Drag and Drop nicht. Ich weiß nicht was ich falsch gemacht habe bzw. wo genau der Hacken drinnen steckt.
Ich hoffe es kann mir jemand weiterhelfen und mir ein paar Tipps geben!
Dankeschön schon im Voraus!
HTML:
HTML-Code
<code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<title>Einrichtungstool</title>
<body onLoad="loadObjects(object)"
onmousedown="down(event)"
onmousemove="move(event)"
onmouseup="up(event)">
<style type="text/css">
#object {
display:block;
margin-top:5px;
height: 100px;
left:400px;
top:400px;
}
</style>
<script type="text/javascript">
var object = new Array();
object[0] = new Image();
object[0].src= "objects/kueche/spuele1.png";
object[1] = new Image();
object[1].src= "objects/kueche/spuele2.png";
object[2] = new Image();
object[2].src= "objects/kueche/spuele1_a2.png";
object[3] = new Image();
object[3].src= "objects/kueche/herd1.png";
object[4] = new Image();
object[4].src= "objects/kueche/herd2.png";
function loadObjects(object) {
for(var i=0, l=object.length; i<l; i++) {
var neuesBildElement = document.createElement("img");
neuesBildElement.id = "object";
neuesBildElement.src = object[i].src;
neuesBildElement.setAttribute("dragdrop", "yes");
document.body.appendChild(neuesBildElement);
}
}
// ---------- DRAG AND DROP ----------
var click;
var dx;
var dy;
// wenn object bewegt werden soll
function down(evt){
event.preventDefault();
//console.log(evt);
click = evt.target;
//console.log(click.tagName);
//wenn dragdrop nicht gefunden, dann in der hierarchie eines rauf
while(getAttribute("dragdrop") != "yes"){
click = click.parentNode;
if(element.tagName == "BODY"){
break; //statt return, da sonst bild hängen bleibt
}
}
//wo wurde geklickt
dx = click.offsetLeft - evt.clientX;
dy = click.offsetTop - evt.clientY;
}
function move(evt){
evt.preventDefault();
if(click){
click.style.left = evt.pageX + dx + "px";
click.style.top = evt.pageY + dy + "px";
click.style.cursor = 'pointer';
}
click.parentNode.appendChild(click); //Element in den Vordergrund
}
// maus loslassen
function up(evt){
event.preventDefault()
if(click){
click.style.border ='';
click = null; //move funktion deaktivieren
}
}
</script>
</body>
</html>
</code>
Zuletzt bearbeitet von einem Moderator: