0

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

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

1 回答 1

1

把这个

$(elediv).draggable();

在这之后

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

这是一个工作小提琴。

你现在这样做的方式，它试图让你的elementAddeddiv 在它被添加到页面之前就可以拖动。

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

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)"...
于 2013-06-23T20:57:04.307 回答