添加元素，然后拖动它

add element and then drag it

本文关键字：拖动 然后 元素 添加      更新时间：2023-09-26

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

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

放置此

$(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)"...
相关文章：