Javascript Drag and Drop Array

MiezeKathi · 17.07.2013

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!

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>

Duddle · 17.07.2013

AW: Javascript Drag and Drop Array

Kannst du mal die Version einfügen, die mit einem Bild funktioniert? Ich bekomme hier einige Fehler und sehe viele Probleme, die schon in der 1-Bild-Variante hätten auftreten sollen.

Ansonsten, falls das keine Lernaufgabe ist, solltest du dir überlegen, direkt zu Draggable bzw. Droppable plus Sortable von jQuery (oder ähnlichen Frameworks) zu greifen. Diese Module sind sofort einsatzfähig und bieten viele Möglichkeiten zur Anpassung. Diese Seite beschreibt so ziemlich alle Facetten der der Bausteine, auch wenn dort mit einer veralteten jQuery-Version gearbeitet wird.

Duddle

MiezeKathi · 17.07.2013

AW: Javascript Drag and Drop Array

Erstmal vielen Dank für deine Rückmeldung. Ich würde es gerne (falls es möglich) so hinbekommen, aber wenn es wirklich keinen Ausweg gibt muss ich wohl auf das genannte Draggable zurückgreifen. Danke für den Tipp!

Hier noch einmal der Code

Code:

<code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<title>Einrichtungstool</title>
<style type="text/css">
#canvas{
margin-left:10px;
margin-top:10px;
position:absolute;
left:0px;
top:0px;
}
</style>
</head>
<body 
onLoad="drehen()"
onmousedown="down(event)"
onmousemove="move(event)"
onmouseup="up(event)"
>
<!--TOOLBAR-->
<div id="toolleiste"
<ul>
<li id="iconLi"><a href="index.html"><img id="icon" src= "icon/zurueck.png" alt="Zurück"/></a></li> 
<li id="iconLi"><img id="icon" src= "icon/drehen.png" alt="Drehen" onClick="javascript:drehen();"/></li>
<li id="iconLi"><img id="icon" src= "icon/loeschen.png" alt="Löschen" onClick="javascript:loeschen();"/></li> 
<li id="iconLi"><img id="icon" src= "icon/speichern.png" alt="Speichern"/></li> 
</ul>
</div>

<div id="objectbox">
<canvas id="canvas" width="100" height="100" dragdrop="yes"> 
        HTML 5 kompatibler Browser wird benötigt.
</canvas>
</div>


<script type="text/javascript">
// ---------- DRAG AND DROP ---------- 
var click;
var dx;
var dy;

function down(evt){
    event.preventDefault();
    //console.log(evt);
    click = evt.target;    
    //console.log(click.tagName);
    
    while(click.tagName != "BODY"){
        if(click.getAttribute("dragdrop") == "yes"){
            break;
        }
        click = click.parentNode;
        console.log(click);        
    }
    
    dx = click.offsetLeft - evt.pageX;
    dy = click.offsetTop - evt.pageY;
    click.style.cursor = "hand";
}

function move(evt){
evt.preventDefault();
    if(click != "null"){
        var left = evt.pageX + dx;
        var top = evt.pageY + dy;
        click.style.left = left+"px";
        click.style.top = top+"px";
        //console.log(top);
    }

    click = click.parentNode.appendChild(click);
    click.style.cursor='pointer';
    
}
function up(evt){ 
 event.preventDefault()
 click.style.border ='';
 click = "null";
}

//---------- DREHEN ---------- 
function drehen(){
var canvas = document.getElementById('canvas');
      var img = new Image();
      img.onload = function(){
        if(canvas.getContext){
          var c = canvas.getContext('2d');
          c.translate(100, 0);
          c.rotate(90 * Math.PI/180);         
          c.drawImage(img, 0, 0);
        }
      }
      img.src = 'objects/kueche/spuele1.png';
    }

//---------- OBJEKT LÖSCHEN ---------- 
function loeschen(){
    if (document.getElementById('canvas')) {
       var objekt = document.getElementById('canvas');
      objekt.parentNode.removeChild(objekt); 
}
} 
    
</script>
</body>
</html>
</code>

Duddle · 17.07.2013

AW: Javascript Drag and Drop Array

Bitte benutze in Zukunft die [CODE ] und [HTML ] Tags (bzw. die Knöpfe dafür).

Mich wundert es, dass die Sache überhaupt bei dir funktioniert hat. Im Firefox musste ich erst folgende Änderungen (fett hervorgehoben) machen, damit die 1-Bild-Variante wie erwartet arbeitet:

Code:

function down(evt){
    [B]evt[/B].preventDefault();
    click = evt.target;

    while(click.tagName != "BODY" [B]&& click.tagName != "HTML"[/B]){
	if(click.getAttribute("dragdrop") == "yes"){
	    break;
	}
	click = click.parentNode;
    }

    dx = click.offsetLeft - evt.pageX;
    dy = click.offsetTop - evt.pageY;
    click.style.cursor = "hand";
}

Code:

function move(evt){
    evt.preventDefault();
    if(click != [B]null[/B]){
	var left = evt.pageX + dx;
	var top = evt.pageY + dy;
	click.style.left = left+"px";
	click.style.top = top+"px";
	//console.log(top);
	
	//das war vorher ausserhalb dieses if-Blocks. Aber wenn click = null, dann ist click.parentNode auch nix
	[B]click = click.parentNode.appendChild(click);
	click.style.cursor='pointer';[/B]
    }
}

Code:

function up(evt){
    [B]evt[/B].preventDefault()
    click.style.border ='';
    click = [B]null[/B];
}

Was hast du denn mit dem "click.parentNode.appendChild(click)" vor? Soll das Drag&Drop die Elemente auch im HTML selbst verschieben?
Zweitens: wirst du später Elemente innerhalb von klickbaren Elementen haben, statt nur direkt klickbare Bilder? Dein "hochhangeln" in der Schleife in down() verstehe ich sonst nicht.

Versuch mal, auf Grundlage dieser Änderungen jetzt mehr Bilder einzubauen, sie weicht ja um einiges von deinem ersten Code ab, und poste diese Variante. Mich interessiert, ob du dann mehrere <canvas> einbaust oder nur eines, usw.

Duddle

MiezeKathi · 18.07.2013

AW: Javascript Drag and Drop Array

Hallo!

Danke für den Hinweis. Ich wusste bis dato nicht wie das hier mit der Code-Auszeichnung funktioniert, da ich die Knöpfe hier nirgendwo finden kann. Ich hoffe es funktioniert jetzt - wenn nicht sorry.

Also danke für deine Verbesserungsvorschläge. Das waren ja doch einige Fehler. Jedoch ging es dann noch immer nicht, und ich bin nach langem Suchen draufgekommen, dass ich im .css ein position:absolute vergessen habe - ohne dem funktioniert Drag and Drop anscheinend nicht. Nun funktioniert mal das Drag and Drop mit mehreren Bildern.

Um auf deine Frage bzgl. "click = click.parentNode.appendChild(click);" zu kommen. Das kann man in meinem speziellen Fall natürlich weg lassen (hab diesen Code von einem anderen Projekt kopiert und hab das wohl übersehen).

Zu deiner 2. Frage: Ja, das hab ich mal sicherheitshalber so gelassen. Da es eventuell schon so sein wird.

Bzgl. Canvas spiel ich mich gerade herum. Ganz hinbekommen tu ichs noch nicht. Irgendwas funktioniert da noch nicht. Ich würde nämlich gerne pro Bild ein canvas machen damit man so das Drehen eines einzelnen Bildes realisieren kann. Im Spiel gibt es oben in der Toolbox nämlich einen Drehbutton, der soll pro Klick das Bild um 90 Grad drehen. Das hat mit einem Bild auch schon funktioniert, sowie auch das Löschen eines einzelnen Bildes.

Code:

<code class="language-html"> 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<title>Einrichtungstool</title>
</head>
<body onLoad="loadObjects(objects)"
onLoad="drehen()"
onmousedown="down(event)"
onmousemove="move(event)"
onmouseup="up(event)"
>
<!-- TOOLBAR -->
<div id="toolleiste"
<ul>
        <li id="iconLi"><a href="index.html"><img id="icon" src= "icon/zurueck.png" alt="Zurück"/></a></li> 
        <li id="iconLi"><img id="icon" src= "icon/drehen.png" alt="Drehen" onClick="javascript:drehen();"/></li>
        <li id="iconLi"><img id="icon" src= "icon/loeschen.png" alt="Löschen" onClick="javascript:loeschen();"/></li> 
        <li id="iconLi"><img id="icon" src= "icon/speichern.png" alt="Speichern"/></li> 
</ul>
</div>

<!-- OBJECTBOX -->
<div id="objectbox">
<canvas id="myCanvas"></canvas>
</div>

<script type="text/javascript">
// ** ---------- ARRAY OBJECTS ---------- **/
var objects = new Array();

objects[0] = new Image();
objects[0].src= "objects/kueche/spuele1.png";

objects[1] = new Image();
objects[1].src= "objects/kueche/spuele2.png";

objects[2] = new Image();
objects[2].src= "objects/kueche/spuele1_a2.png";

objects[3] = new Image();
objects[3].src= "objects/kueche/spuele2_a2.png";

objects[4] = new Image();
objects[4].src= "objects/kueche/herd1.png";

objects[5] = new Image();
objects[5].src= "objects/kueche/herd2.png";

objects[6] = new Image();
objects[6].src= "objects/kueche/herd1_a2.png";

objects[7] = new Image();
objects[7].src= "objects/kueche/herd2_a2.png";

objects[8] = new Image();
objects[8].src= "objects/kueche/arbeitsflaeche1.png";

objects[9] = new Image();
objects[9].src= "objects/kueche/arbeitsflaeche2.png";

// ** ---------- LOAD OBJECTS ---------- **/
function loadObjects(objects) {
    for(var i=0, l=objects.length; i<l; i++) {
        
        var neuesBildElement = document.createElement("img");
            neuesBildElement.id = "object";
        neuesBildElement.src = objects[i].src;
         neuesBildElement.setAttribute("dragdrop", "yes");
        var canvas = document.createElement("canvas");
        canvas = neuesBildElement.parentNode;

            document.body.appendChild(neuesBildElement);
        document.getElementById("objectbox").appendChild(neuesBildElement);
    }
}

// ** ---------- ROTATE OBJECTS ---------- **/
function drehen (objects){
      var img = new Image();
      img.onload = function(){
        if(object.getContext){
                  var c = object.getContext('2d');
                  c.translate(100, 0);
                 c.rotate(90 * Math.PI/180);         
                  c.drawImage(img, 0, 0);
            }
     }
     img.src = objects[i].src;
}

// ---------- DRAG AND DROP ---------- 
var click;
var dx;
var dy;

function down(event){
        event.preventDefault();
        //console.log(evt);
        click = event.target;    
        //console.log(click.tagName);
    
        while(click.tagName != "BODY" && click.tagName != "HTML"){
                if(click.getAttribute("dragdrop") == "yes"){
                click.style.cursor = "pointer";
                break;
        }
        click = click.parentNode;
}
    dx = click.offsetLeft - event.pageX;
    dy = click.offsetTop - event.pageY;
}

function move(event){
event.preventDefault();
    if(click != null){
        var left = event.pageX + dx;
        var top = event.pageY + dy;
        click.style.left = left+"px";
        click.style.top = top+"px";
        //console.log(top);
        click = click.parentNode.appendChild(click);
    }
}
function up(event){ 
    event.preventDefault()
    click.style.border ='';
    click = null;
}

//---------- OBJEKT LÖSCHEN ---------- 
function loeschen(){
    if (document.getElementById('canvas')) {
       var object = document.getElementById('canvas');
      objekt.parentNode.removeChild(object); 
    }
} 
        
</script>
</body>
</html>
</code>

Entschuldige, es hat anscheinend wieder nicht funktioniert. Was mach ich da denn falsch? :-/

Duddle · 18.07.2013

AW: Javascript Drag and Drop Array

Schreib einfach [CODE ] [/CODE ] bzw. [HTML ] [/HTML ] (ohne die Leerzeichen) und dazwischen den Code. Du kannst auch deinen Beitrag bearbeiten, um das zu korrigieren.

Den eigentlichen Code schaue ich mir später an und füge meine Antwort dazu dann hier rein.

Duddle

randacek_pro · 18.07.2013

Moderationsbemerkung

Ich hab auf euren Hinweis hin, mal Code-Tags eingefügt...

@MiezeKathi (warum gefällt mir der Name wohl?

) du kannst deinen Code in der erweiterten Editor-Ansicht komplett markieren und dann oben die Schaltfläche für "#" oder "<>" drücken - das macht den Code-Tag automatisch. Wobei "#" für Code allgemein steht und "<>" für HTML...

Lieber Gruß

MiezeKathi · 18.07.2013

AW: Javascript Drag and Drop Array

@randacek_pro Danke fürs Ausbessern ;-) Wenn ich auf erweitert klicke tut sich bei mir nichts. Es kommen keine Schaltflächen...

@Duddle: DANKE!
LG

randacek_pro · 18.07.2013

AW: Javascript Drag and Drop Array

Schau mal hier:

Da siehst du dann oben das, was jetzt orange eingerahmt ist:

Also sprich, markierter Text und dann den gekennzeichneten Button drücken.

So hab ich das auch ausgebessert

MiezeKathi · 18.07.2013

AW: Javascript Drag and Drop Array

Ahhhhh! Es lag an meinen Einstellungen. Wie blöd kann man sein...
DANKE!

randacek_pro · 18.07.2013

AW: Javascript Drag and Drop Array

Bei zwei Browsern, der gleiche "Fehler"?
Mhhh, welche Browser nutzt du denn?
Evtl. irgendwelche Blocker installiert, bzw. hast du Javascript eingeschaltet (für das Forum)? (Wobei bei mir auch ohne Javascript der erweiterte Editor auf geht...)

Oh, okay.
Schön, dass du es lösen konntest

Duddle · 18.07.2013

AW: Javascript Drag and Drop Array

Was hast du dir denn bei der drehen()-Funktion gedacht?
Offensichtlich willst du darin dein globales Array benutzen, übergibst es (bzw. einen gleichklingenden Parameter) aber unnötig an die Funktion. Die Funktion selbst wird auch nie mit einem Parameter aufgerufen. Du greifst auf

Code:

objects[i].src

zu, hast aber i nicht definiert. Im onload-Handler sprichst du object an, obwohl das 1. nur einen Großbuchstaben von der Object-Klasse entfernt ist und so mit höchster Wahrscheinlichkeit in Zukunft zu Fehlern oder Missverständnissen führt, und 2. du die Variable object nie definierst.

Die Funktion loeschen() hat auch einige Fehler drin, aber das solltest du selbst finden.
Ich empfehle dir auch, die Variablen allgemein gescheiter zu benennen.

Duddle

MiezeKathi · 18.07.2013

AW: Javascript Drag and Drop Array

ok, danke! hab schon bisschen ein durcheinander :/

gibt es irgendeine funktion die mir ausliest welches element als VORLETZTES gedrückt wurde? ich find da einfach nichts. und als geklicktes element wird keins von den bildern sondern immer der drehbutton ausgegeben - und das will ich ja nicht.

Duddle · 18.07.2013

AW: Javascript Drag and Drop Array

gibt es irgendeine funktion die mir ausliest welches element als VORLETZTES gedrückt wurde?

Nein, das musst du dir selbst zusammenbasteln.

Niemand hat gesagt, dass JavaScript besonders entwicklerfreundlich ist. Nicht umsonst gibt es hocherfolgreiche Frameworks wie jQuery. Aber wenn man die Schmerzen von purem JS nie erfahren hat, weiß man diese deutlich besseren Werkzeuge garnicht zu schätzen...

Ich habe mal aus Jux ein Minimalbeispiel geschrieben, um vielleicht einen anderen Ansatz zu zeigen. Es ist aber nur in FF getestet. Vielleicht kannst du dir davon irgendwas abgucken:

HTML:

<!DOCTYPE HTML>
<html lang="en">
    <head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	    .highlight {
		border: 3px solid red;
	    }
	</style>
	<script type="text/javascript">
	    var selectedElement = null;
	    function foo() {
		if(selectedElement == null) {
		    alert("erst auswaehlen");
		    return;
		}
		alert("foo mit "+selectedElement);
	    }
	    function clickHandler(event) {
		if(event.target != null) {
		    if(event.target.tagName == "IMG") {
			selectElement(event.target);
		    }
		}
	    }
	    function selectElement(el) {
		if(selectedElement == null) {
		    var newClassNames = el.className + " highlight";
		    el.className = newClassNames;
		    selectedElement = el;
		} else if(el == selectedElement) {
		    var newClassNames = el.className.replace(/highlight/g, "");
		    el.className = newClassNames;
		    selectedElement = null;
		}
	    }

	    window.onload = init;
	    window.onclick = clickHandler;
	    function init() {
		document.getElementById("linkFoo").onclick = foo;
	    }
	</script>
    </head>
    <body>
	<ul>
	    <li><a href="#" id="linkFoo">Foo</a></li>
	</ul>
	<img src="img/1.png" alt="" />
	<img src="img/2.png" alt="" />
    </body>
</html>

Duddle

MiezeKathi · 23.07.2013

AW: Javascript Drag and Drop Array

ich bin am verzweifeln :/
irgendwie funktioniert das alles nicht!

ich bin noch immer beim problem mit dem drehen.
es scheiters schon an <canvas>.

wie kann ich es schaffen dass jedes element des arrays (<img>) in einem canvas erzeugt wird, dass der code dann so aussieht:

<canvas><img scr=""></img></canvas> //erstes Element
<canvas><img scr=""></img></canvas> //zweites Element
<canvas><img scr=""></img></canvas> //drittes Element
<canvas><img scr=""></img></canvas> //viertes Element
usw.

ich schaffs nur, dass in einem <canvas> alle IMGs drinnen sind...

und ich kann die einzelnen elemente mit objects nicht ansprechen -- was mach ich falsch?

wäre super wenn mir jemand weiter helfen könnte.

HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel = "stylesheet" type = "text/css" href = "style.css"/> <title>Einrichtungstool - Küche</title> <style type ="text/css"> .highlight { border: 3px solid red; } </style> </head> <body onLoad="loadObjects(objects)" onmousedown="down(event)" onmousemove="move(event)" onmouseup="up(event)" >  <div id="toolleiste" <ul> <li id="iconLi"><a href="index.html" title="Zurück"><img id="icon" src= "icon/zurueck.png" /></a></li> <li id="iconLi"><img id="icondrehen" src= "icon/drehen.png" title="Drehen" onClick="javascript:drehen();"/></li> <li id="iconLi"><img id="icon" src= "icon/loeschen.png" title="Löschen" onClick="javascript:loeschen(event);"/></li> <li id="iconLi"><img id="icon" src= "icon/speichern.png" title="Speichern"/></li> </ul> </div>  <div id="objectbox"> <canvas id="myCanvas"></canvas> </div> <div class="room"> </div> <div id="footer"> (C) 2013 mt111018, mt111036 </div> <script type="text/javascript"> // ** ---------- KÜCHE ---------- **/ // ** ---------- ARRAY OBJECTS ---------- **/ var objects = new Array(); objects[0] = new Image(); objects[0].src= "objects/kueche/spuele1.png"; objects[1] = new Image(); objects[1].src= "objects/kueche/spuele2.png"; objects[2] = new Image(); objects[2].src= "objects/kueche/spuele1_a2.png"; objects[3] = new Image(); objects[3].src= "objects/kueche/spuele2_a2.png"; objects[4] = new Image(); objects[4].src= "objects/kueche/herd1.png"; objects[5] = new Image(); objects[5].src= "objects/kueche/herd2.png"; objects[6] = new Image(); objects[6].src= "objects/kueche/herd1_a2.png"; objects[7] = new Image(); objects[7].src= "objects/kueche/herd2_a2.png"; objects[8] = new Image(); objects[8].src= "objects/kueche/arbeitsflaeche1.png"; objects[9] = new Image(); objects[9].src= "objects/kueche/arbeitsflaeche2.png"; // ** ---------- LOAD OBJECTS ---------- **/ function loadObjects(objects) { for(var i=0, l=objects.length; i<l; i++) { var neuesBildElement = document.createElement("img"); neuesBildElement.id = "object"; neuesBildElement.src = objects[i].src; neuesBildElement.setAttribute("dragdrop", "yes"); var myCanvas = document.getElementById("myCanvas"); myCanvas = neuesBildElement.parentNode; document.body.appendChild(neuesBildElement); document.getElementById("objectbox").appendChild(neuesBildElement); } } // ---------- DRAG AND DROP ---------- var click; var dx; var dy; function down(event){ event.preventDefault(); //console.log(evt); click = event.target; //console.log(click.tagName); while(click.tagName != "BODY" && click.tagName != "HTML"){ if(click.getAttribute("dragdrop") == "yes"){ click.style.cursor = "pointer"; break; } click = click.parentNode; } dx = click.offsetLeft - event.pageX; dy = click.offsetTop - event.pageY; } function move(event){ event.preventDefault(); if(click != null){ var left = event.pageX + dx; var top = event.pageY + dy; click.style.left = left+"px"; click.style.top = top+"px"; //console.log(top); } } function up(event){ event.preventDefault() click.style.border = null; click = null; } /* function drehen(){ var canvas = document.getElementById('canvas'); var img = new Image(); img.onload = function(){ if(canvas.getContext){ var c = canvas.getContext('2d'); c.translate(100, 0); c.rotate(90 * Math.PI/180); c.drawImage(img, 0, 0); } } img.src = 'objects/kueche/spuele1.png'; } } */ function loeschen(event){ var object = event.target; console.log(object); if (object = document.getElementById('object')) { var img = document.getElementById('object'); img.parentNode.removeChild(object); } } </script> </body> </html>

Duddle · 23.07.2013

AW: Javascript Drag and Drop Array

Wenn du schon mit <canvas> arbeiten willst, solltest du auch im Ansatz verstehen wie. Du musst keine HTML-Elemente als Kindknoten haben, damit sie für den <canvas>-Kontext bereitstehen. Stattdessen kann JavaScript Methoden des Kontexts aufrufen, die zum Beispiel Rechtecke oder Verläufe, aber eben auch Bilder, zeichnen.
Nicht umsonst heißt <canvas> so: es ist eine Leinwand, auf der du Bilder nachzeichnest, nicht draufklebst.

Diese Seite bietet ein schickes Tutorial von Grund auf an, das du durcharbeiten solltest. Ohne diese Grundlagen landest du sonst bei jedem kleinen Problem wieder im Forum.
Danach kannst du dir dieses Beispiel für ein Drag&Drop innerhalb von <canvas> anschauen. Wenn du dann dort nicht jede Zeile verstehst (abgesehen von den RGraph-Bibliotheks-Methoden), fehlen dir auch JavaScript-Grundlagen. Das dort gezeigte Prinzip kannst du dann auf andere Transformationen anwenden.

Duddle