Question

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

我有一个包含三个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>

Answer 1

把这个

$(elediv).draggable();

在此之后

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

这是working fiddle.

现在你正在这样做，它试图让你的elementAdded div在它被添加到页面之前可拖动。

此外，缩短代码的好方法：

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)"...

添加元素，然后拖动它

1 个答案: