javascript - 要素を追加してからドラッグします

Question

実際、なぜ機能しないのかわかりません。

3 つの div を含む列があります。1 つをクリックすると、別の div に新しいオブジェクトとして追加されます (ID を取得し、「0」を後ろに付けて新しいオブジェクトに渡します)。

さて、そのdivが追加されたら、ドラッグ可能にしたいので、単純なjquery関数を使用しました。

function addObject(idOfObject) {

    var elediv = document.createElement('div');

    if(idOfObject == 1)
    {
        elediv.style.background ="lightblue";
        elediv.innerHTML = '1';     
    }

    else if(idOfObject == 2)
    {
        elediv.style.background ="yellow";
        elediv.innerHTML = '2';     
    }

    else if(idOfObject == 3)
    {
        elediv.style.background ="lightgreen";
        elediv.innerHTML = '3';
    }

    elediv.setAttribute('id', idOfObject + '0');
    elediv.setAttribute('class', 'elementAdded');

    document.getElementById("workzone").appendChild(elediv);
}

$(function() {

    $( "div.elementAdded" ).draggable();

});

そのコードの何が問題になっていますか?

html 部分は次のとおりです。

<div id="elecolumn">
    <header>Add an element</header>

    <div class="elementAjoutable" id="1" onclick="addObject(this.id)" style="background:lightblue;">1</div>
    <div class="elementAjoutable" id="2" onclick="addObject(this.id)" style="background:yellow;">2</div>
    <div class="elementAjoutable" id="3" onclick="addObject(this.id)" style="background:lightgreen;">3</div></div>  

</div>

<div id="workzone"></div>