如何使用 jQuery UI 拖放来防止堆叠 div？答案

【问题标题】：How to prevent stacking divs, with jQuery UI drag & drop?如何使用 jQuery UI 拖放来防止堆叠 div？
【发布时间】：2012-12-11 10:23:34
【问题描述】：

我不知道如何在所选位置已经有一个放置的元素时防止放置。

我有三个不同大小的 div 元素，我将它们拖到一个可放置的网格上。我完成代码的方式（见下面的 jsFiddle），我想不出一种方法来检查那里是否已经有一个项目。

任何人都可以想办法，有什么想法吗？ JSFiddle： http://jsfiddle.net/sExrV/1/

我认为代码会在“drop”事件中的某个地方，但我想不出一种方法来测试它：

$("#grid").droppable({
    accept: (".widget1, .widget2, .widget3"),
    drop: function(event, ui) {
    // test for existing element dropped here??

【问题讨论】：

JQuery draggable - No overlap的可能重复
对此的公认答案建议使用“占位符”功能，但这是针对 jQuery“可排序”的，我没有使用它 - 我正在使用“可放置”。
也 - 关于该问题的另一个很好的答案，与 jquerycollision 建议，是用于检测拖动事件的碰撞。将鼠标悬停在副本上时网站上的示例会触发 - 我只希望它在 dropped 重复时运行。关于如何做到这一点的任何想法？

【解决方案1】：

您是否尝试过在任何东西被丢弃时禁用可丢弃功能？

$("#grid").droppable({
    drop: function() { $( "#grid" ).droppable( "option", "disabled", true ); }
});

【讨论】：