Auf Thema antworten 2026

Beitrag

<blockquote data-quote="MiezeKathi" data-source="post: 2210275" data-attributes="member: 71126">AW: Javascript Drag and Drop Arrayich bin am verzweifeln :/irgendwie funktioniert das alles nicht! ich bin noch immer beim problem mit dem drehen. es scheiters schon an &lt;canvas&gt;. wie kann ich es schaffen dass jedes element des arrays (&lt;img&gt;) in einem canvas erzeugt wird, dass der code dann so aussieht:&lt;canvas&gt;&lt;img scr=&quot;&quot;&gt;&lt;/img&gt;&lt;/canvas&gt; //erstes Element&lt;canvas&gt;&lt;img scr=&quot;&quot;&gt;&lt;/img&gt;&lt;/canvas&gt; //zweites Element&lt;canvas&gt;&lt;img scr=&quot;&quot;&gt;&lt;/img&gt;&lt;/canvas&gt; //drittes Element&lt;canvas&gt;&lt;img scr=&quot;&quot;&gt;&lt;/img&gt;&lt;/canvas&gt; //viertes Elementusw. ich schaffs nur, dass in einem &lt;canvas&gt; 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]&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 - Küche&lt;/title&gt;&lt;style type =&quot;text/css&quot;&gt;&nbsp; .highlight {&nbsp; &nbsp; &nbsp; &nbsp; border: 3px solid red;&nbsp; &nbsp; &nbsp; &nbsp; }&lt;/style&gt;&lt;/head&gt;&lt;body onLoad=&quot;loadObjects(objects)&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; title=&quot;Zurück&quot;&gt;&lt;img id=&quot;icon&quot; src= &quot;icon/zurueck.png&quot; /&gt;&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;iconLi&quot;&gt;&lt;img id=&quot;icondrehen&quot; src= &quot;icon/drehen.png&quot; title=&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; title=&quot;Löschen&quot; onClick=&quot;javascript:loeschen(event);&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; title=&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;div class=&quot;room&quot;&gt;&lt;/div&gt;&lt;div id=&quot;footer&quot;&gt;(C) 2013 mt111018, mt111036&lt;/div&gt;&lt;script type=&quot;text/javascript&quot;&gt;// ** ---------- KÜCHE ---------- **/// ** ---------- 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; 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 myCanvas = document.getElementById(&quot;myCanvas&quot;);&nbsp; &nbsp; &nbsp; &nbsp; myCanvas = 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; }}// ---------- DRAG AND DROP ---------- var click;var dx;var dy;function down(event){&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; //console.log(evt);&nbsp; &nbsp; click = event.target;&nbsp; &nbsp; &nbsp; &nbsp; //console.log(click.tagName);&nbsp; &nbsp; &nbsp; &nbsp; while(click.tagName != &quot;BODY&quot; &amp;&amp; click.tagName != &quot;HTML&quot;){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(click.getAttribute(&quot;dragdrop&quot;) == &quot;yes&quot;){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; click.style.cursor = &quot;pointer&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; click = click.parentNode;&nbsp; &nbsp; }&nbsp; &nbsp; dx = click.offsetLeft - event.pageX;&nbsp; &nbsp; dy = click.offsetTop - event.pageY;&nbsp; &nbsp; }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; }}function up(event){ &nbsp; &nbsp; event.preventDefault()&nbsp; &nbsp; click.style.border = null;&nbsp; &nbsp; click = null;}/*function drehen(){var canvas = document.getElementById(&#039;canvas&#039;);&nbsp; &nbsp; &nbsp; var img = new Image();&nbsp; &nbsp; &nbsp; img.onload = function(){&nbsp; &nbsp; &nbsp; &nbsp; if(canvas.getContext){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var c = canvas.getContext(&#039;2d&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c.translate(100, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c.rotate(90 * Math.PI/180);&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; img.src = &#039;objects/kueche/spuele1.png&#039;;&nbsp; &nbsp; }}*/function loeschen(event){ &nbsp; &nbsp; var object = event.target; &nbsp; &nbsp; console.log(object); &nbsp; &nbsp; if (object = document.getElementById(&#039;object&#039;)) {&nbsp; &nbsp; &nbsp; &nbsp; var img = document.getElementById(&#039;object&#039;);&nbsp; &nbsp; &nbsp; &nbsp; img.parentNode.removeChild(object); &nbsp; &nbsp; }}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;[/HTML]</blockquote>

[QUOTE="MiezeKathi, post: 2210275, member: 71126"] [b]AW: Javascript Drag and Drop Array[/b] 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[i] 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>[/HTML][/i] [/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?