jQuery stapelbar funktioniert nicht auf dynamisch erstellte ziehbare Elemente

Question

Ich erstelle ziehbare Elemente zur Laufzeit und möchte sie stapelbar machen. Jedes Mal, wenn ich ein neues ziehbar Element erzeugen, dieser Code ausgeführt wird:

$('.draggable#Element' + ElementID).draggable({ 
    containment: "body", 
    stack: "#draggables" 
}); 

Ziehbare Container mit zwei generierten Elementen:

<div id="draggables"> 
    <div class="draggable" id="Element1"></div> 
    <div class="draggable" id="Element2"></div> 
</div> 

ich jedes Element schleppen kann. Das Contemant funktioniert auch.

Aber: Leider nur das letzte erstellte Element stapelt, wenn ich es umherziehen. Die anderen Elemente behalten ihren Z-Index und bleiben im Hintergrund.

Ich habe auch versucht, jedes Mal ein neues Element dieser Code ausgeführt wird, erstellt (siehe oben gleiche Ergebnis wie der Code):

$('.draggable').each(function() { 
    $(this).draggable({ 
     containment: "body", 
     stack: "#draggables" 
    }); 
}); 

Und dieses:

$('.draggable').draggable({ 
    containment: "body", 
    stack: "#draggables" 
}); 

Wie erreiche ich, dass jeder Elementstapel korrekt?

jsFiddle Beispiel: https://jsfiddle.net/zurgs1zb/

Answer 1

Scheck erster Kommentar. und versuchen, alle Option Laufzeit in nach intialization Stapel Option und Deklaration Stapel löschen.

$('.draggable').each(function() { 
if($(this).draggable("option", "stack") == false) //if not already set 
    { 
$($(this)).draggable("option", "stack", "#draggables"); // set stack option 
    } 

});