Javascript 添加元素，然后拖动它

实际上我不知道为什么它不起作用

我有一个包含三个div的列。当您单击其中一个div时，它将作为另一个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>

添加一个元素
1.
2.
3.

把这个

$(elediv).draggable();

此后

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

这里有一个

您现在的做法是，它试图在您的

元素添加到页面之前将其拖动

另外，缩短代码的一个好方法是：

function addObject(idOfObject, color) {

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

    elediv.style.background = color;
    elediv.innerHTML = idOfObject;

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

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

然后在HTML中按以下方式调用它：

...onclick="addObject(this.id, this.style.background)"...