jquery - 当拖放到不同的 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!
}

标签： jqueryhtml