Drag and Drop Event Delegation

[Coup]

Drag and Drop Divs

Hallo,
Ich habe ein Beispiel gefunden um Elemente in Div Bereichen sauber hin und herzudraggen.
Simple Agile Planning Board

Doch wie schaffe ich es über einen externen Button ein neues Element(Kärtchen) der id="item1" oder "item2" in den Divbereich ID(todo) einzubinden ? Habe nun schon einiges ausprobiert aber bin letztendlich doch gescheitert.

lg
Flo

 

[kkapsner]

Zeig' doch mal, was du ausprobiert hast.

 

[Coup]

Das Element(Kärtchen) das aufgerufen werden soll wird ja mittels Div id=" item1" etc. eingebunden.
Also habe ich versucht mittels create.Element dem Element mit

innerHTML="<div id="item1" draggable="true"><div class="cardTitle">Learn HTML5</div>

den Code zuzuweisen und dann per getElementBye und appendChild dort auszgeben wo es hin soll.
Es erscheint zwar, jedoch ist es nicht draggable. Der Ansatz ist aber auch blöd glaube ich.

lg
Flo

 

[j-l-n]

Du musst selbstverständlich die Anführungszeichen escapen, sonst denkt JS, dass der String an der Stelle zuende ist. Außerdem fehlt am Ende des Strings ein Anführungszeichen.
Solche Syntaxfehler findet man übrigens leicht mit der Fehlerkonsole...

 

[Coup]

Hi,
hatte mich grad vertippt. Hieri st meine vollständige Funktion

<script>
function popup() {
var popup = document.createElement("item1");
popup.className = "cardTitle";
popup.innerHTML = '<div id="item1" draggable="true"><div class="cardTitle">Neue Karte</div></div>';
var Ausgabe = document.getElementById("todo");
Ausgabe.appendChild(popup);
}

</script>

Es poppt prima auf, wie geplant. Jedoch ist es nicht draggable leider

 

[SteelWheel]

Hey Coup,

Du musst Deinen neuen Container natürlich ebenso initialisieren wie die, die bereits da sind. Du wirst irgendwo eine Funktion für diese "Fähigkeit" verwendet haben - diese greift bei allen DIVs, die da sind und das Attribut tragen. Demnach wirst Du einfach die gleiche Funktion nochmals (für alle) oder gezielt (auf das neue DIV only) anwenden müssen.

Gewittrige Grüße

 

[Coup]

Danke für die Antwort steel, aber
ich kriegs nicht umgesetzt, sodass es während der Laufzeit erzeugt+draggable wird . Auch nicht mit Herumspielerei an der Init()
Setzte ich manuell irgendwo im Quelltext ein

<div id="item1" draggable="true">neue Karte</div>

wird das draggable Div erfolgreich platziert und ist auch verschiebbar.
Kann mir noch jemand helfen dieses Problem zu lösen ?
lg und danke nochmal

- - - Aktualisiert - - -

Problem gelöst Habs sogar allein geschafft ^-^

 

[mikdoe]

AW: Drag and Drop Divs

Zeigst du die Endlösung, Coup?

 

[SteelWheel]

Er wird nach "appendChild" nochmal seine "draggables" angeschoben haben ... oder er hat bemerkt, dass seine feste item-Nummer nicht hilfreich ist, merkte sich darauf hin die Ziffer der neuen ID und hat nur für diese ID angeschoben.