当拖放到不同的div上时，如何将可拖动的div附加到不同的div？

Question

我正在尝试将图标从菜单拖放到页面上的div上，然后将其不添加到放置的div上，而是附加到单独的div上。

例如，我希望能够将图标拖出菜单，将其放在div“ dropover_target”上，使其可以拾取其类的一部分，但最终将图标追加到div“ actual_target” “。

我认为html会这样开始：

<div id="menu">
<div id="icon" class="none"></div>
</div>

<div id="dropover_target" class="area"></div>

<div id="actual_target"></div>

但最终会这样：

<div id="menu"></div>

<div id="dropover_target"></div>

<div id="actual_target">
<div id="icon" class="area+stuff"></div>
</div>

我已成功使用以下jQuery获取dropover_target div的类并将其设置为图标的类。但是我不能再将图标div附加到actual_target div。

 function dragDrop(ev) { 
    ev.preventDefault(); 
    var icon = ev.dataTransfer.getData("text"); 
    var area = 'pos-' + ev.target.id; //get the id of the dropover_target
    $('#'+icon).addClass(area); //add a new class to the icon 

    ev.target.appendChild(document.getElementById(token)); 
//this line appends the icon to the dropover_target - which is not what I want to do!

    $('#actual_target').appendChild(document.getElementById(token)); 
//this line is to append the icon to the actual target - but does not seem to want to work!
}