Auf Thema antworten 2026

Beitrag

<blockquote data-quote="MiezeKathi" data-source="post: 2207461" data-attributes="member: 71126">AW: Javascript Drag and Drop ArrayHallo!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. &quot;click = click.parentNode.appendChild(click);&quot; 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]&lt;code class=&quot;language-html&quot;&gt; &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;/&gt;&lt;link rel = &quot;stylesheet&quot; type = &quot;text/css&quot; href = &quot;style.css&quot;/&gt;&lt;title&gt;Einrichtungstool&lt;/title&gt;&lt;/head&gt;&lt;body onLoad=&quot;loadObjects(objects)&quot;onLoad=&quot;drehen()&quot;onmousedown=&quot;down(event)&quot;onmousemove=&quot;move(event)&quot;onmouseup=&quot;up(event)&quot;&gt;&lt;!-- TOOLBAR --&gt;&lt;div id=&quot;toolleiste&quot;&lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;iconLi&quot;&gt;&lt;a href=&quot;index.html&quot;&gt;&lt;img id=&quot;icon&quot; src= &quot;icon/zurueck.png&quot; alt=&quot;Zurück&quot;/&gt;&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;iconLi&quot;&gt;&lt;img id=&quot;icon&quot; src= &quot;icon/drehen.png&quot; alt=&quot;Drehen&quot; onClick=&quot;javascript:drehen();&quot;/&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;iconLi&quot;&gt;&lt;img id=&quot;icon&quot; src= &quot;icon/loeschen.png&quot; alt=&quot;Löschen&quot; onClick=&quot;javascript:loeschen();&quot;/&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;iconLi&quot;&gt;&lt;img id=&quot;icon&quot; src= &quot;icon/speichern.png&quot; alt=&quot;Speichern&quot;/&gt;&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;!-- OBJECTBOX --&gt;&lt;div id=&quot;objectbox&quot;&gt;&lt;canvas id=&quot;myCanvas&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;&lt;script type=&quot;text/javascript&quot;&gt;// ** ---------- ARRAY OBJECTS ---------- **/var objects = new Array();objects[0] = new Image();objects[0].src= &quot;objects/kueche/spuele1.png&quot;;objects[1] = new Image();objects[1].src= &quot;objects/kueche/spuele2.png&quot;;objects[2] = new Image();objects[2].src= &quot;objects/kueche/spuele1_a2.png&quot;;objects[3] = new Image();objects[3].src= &quot;objects/kueche/spuele2_a2.png&quot;;objects[4] = new Image();objects[4].src= &quot;objects/kueche/herd1.png&quot;;objects[5] = new Image();objects[5].src= &quot;objects/kueche/herd2.png&quot;;objects[6] = new Image();objects[6].src= &quot;objects/kueche/herd1_a2.png&quot;;objects[7] = new Image();objects[7].src= &quot;objects/kueche/herd2_a2.png&quot;;objects[8] = new Image();objects[8].src= &quot;objects/kueche/arbeitsflaeche1.png&quot;;objects[9] = new Image();objects[9].src= &quot;objects/kueche/arbeitsflaeche2.png&quot;;// ** ---------- LOAD OBJECTS ---------- **/function loadObjects(objects) {&nbsp; &nbsp; for(var i=0, l=objects.length; i&lt;l; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var neuesBildElement = document.createElement(&quot;img&quot;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; neuesBildElement.id = &quot;object&quot;;&nbsp; &nbsp; &nbsp; &nbsp; neuesBildElement.src = objects[i].src;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; neuesBildElement.setAttribute(&quot;dragdrop&quot;, &quot;yes&quot;);&nbsp; &nbsp; &nbsp; &nbsp; var canvas = document.createElement(&quot;canvas&quot;);&nbsp; &nbsp; &nbsp; &nbsp; canvas = neuesBildElement.parentNode;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.body.appendChild(neuesBildElement);&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;objectbox&quot;).appendChild(neuesBildElement);&nbsp; &nbsp; }}// ** ---------- ROTATE OBJECTS ---------- **/function drehen (objects){&nbsp; &nbsp; &nbsp; var img = new Image();&nbsp; &nbsp; &nbsp; img.onload = function(){&nbsp; &nbsp; &nbsp; &nbsp; if(object.getContext){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var c = object.getContext(&#039;2d&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c.translate(100, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; c.rotate(90 * Math.PI/180);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c.drawImage(img, 0, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; }&nbsp; &nbsp;&nbsp; img.src = objects[i].src;}// ---------- DRAG AND DROP ---------- var click;var dx;var dy;function down(event){&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; //console.log(evt);&nbsp; &nbsp; &nbsp; &nbsp; click = event.target;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //console.log(click.tagName);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; while(click.tagName != &quot;BODY&quot; &amp;&amp; click.tagName != &quot;HTML&quot;){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(click.getAttribute(&quot;dragdrop&quot;) == &quot;yes&quot;){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; click.style.cursor = &quot;pointer&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; click = click.parentNode;}&nbsp; &nbsp; dx = click.offsetLeft - event.pageX;&nbsp; &nbsp; dy = click.offsetTop - event.pageY;}function move(event){event.preventDefault();&nbsp; &nbsp; if(click != null){&nbsp; &nbsp; &nbsp; &nbsp; var left = event.pageX + dx;&nbsp; &nbsp; &nbsp; &nbsp; var top = event.pageY + dy;&nbsp; &nbsp; &nbsp; &nbsp; click.style.left = left+&quot;px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; click.style.top = top+&quot;px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; //console.log(top);&nbsp; &nbsp; &nbsp; &nbsp; click = click.parentNode.appendChild(click);&nbsp; &nbsp; }}function up(event){ &nbsp; &nbsp; event.preventDefault()&nbsp; &nbsp; click.style.border =&#039;&#039;;&nbsp; &nbsp; click = null;}//---------- OBJEKT LÖSCHEN ---------- function loeschen(){&nbsp; &nbsp; if (document.getElementById(&#039;canvas&#039;)) {&nbsp; &nbsp; &nbsp;&nbsp; var object = document.getElementById(&#039;canvas&#039;);&nbsp; &nbsp; &nbsp; objekt.parentNode.removeChild(object); &nbsp; &nbsp; }} &nbsp; &nbsp; &nbsp; &nbsp; &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;&lt;/code&gt;[/CODE]Entschuldige, es hat anscheinend wieder nicht funktioniert. Was mach ich da denn falsch? :-/</blockquote>

[QUOTE="MiezeKathi, post: 2207461, member: 71126"] [b]AW: Javascript Drag and Drop Array[/b] 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)" >  <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="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>[/CODE]Entschuldige, es hat anscheinend wieder nicht funktioniert. Was mach ich da denn falsch? :-/ [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?