JQuery - 当用户将它们放在彼此上时，在 div 中组合两个或多个 droppable答案

【问题标题】：JQuery - Combine two or more droppables in div when user drops them on each otherJQuery - 当用户将它们放在彼此上时，在 div 中组合两个或多个 droppable
【发布时间】：2013-12-16 11:36:42
【问题描述】：

当用户将它们放在彼此上时，我需要能够组合两个可拖放的项目。只需用户需要将项目相互拖动并将它们合并在一起。他们需要能够在之后再次将它们分开。这有点像在 Android 主屏幕上，图标可以相互放置并创建一个“文件夹”。目前要拖拽的图标是保存在div标签中的，这些标签需要在一个div中用另一个类似的div包裹起来。

谢谢

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

像这样吗？
使用 jquery 1.9.1 jquery ui 1.9.2
http://jsfiddle.net/dm6vG/1/

JS：

$(function(){
    $(".drag-me").draggable({
        stop:function(e){
            $(".drop-here").css('background','#FF0000');
            $(".drop-here").css('border-radius','100px');
            $(this).remove()
        }
    });
})

HTML：

<div class="drop-here">
</div>
<div class="drag-me">
    <a href="#" >Drag me</a>
</div>

CSS：

.drop-here{
    width: 200px;
    height: 200px;
    background:#00FF00;
    margin:20px;
}

如果它们合并在一起，它们将如何分开？

【讨论】：

我已经删除了 $(this).remove()，它仍然可以看到文本（对不起，我忘了在问题中提及）。问题是任何拖动都会给出红色圆圈，我只需要将可拖动对象放入绿色方块时，我想我需要检查可拖动对象的类以检查可拖动对象是否已放置到另一个项目上。
@StorySystems 在这种情况下也使用droppable。看到这个拒绝：stackoverflow.com/questions/5581288/…。您还可以为每个项目添加一个数据属性来决定是否拒绝该项目。