добавить элемент, а затем перетащить его

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

Put это

$(elediv).draggable(); 

После этого

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

Вот working fiddle.

, как вы делаете это не w, он пытается перетащить div-файл elementAdded, прежде чем он будет добавлен на страницу.

Кроме того, хороший способ сократить код:

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