Javascript jQuery Drag插件-防止将一个Drag元素放到另一个元素的顶部

我使用jQuery pluins和

参见a（仅参考问题不是关于限制容器的移动）

是否可以防止拖动元件掉落在顶部

---

另一个因素？但是它可以拖到另一个上面。

虽然您可以通过event.drag/drop脚本完成所需的操作，但使用jquery ui-draggable/dropable也可以轻松完成

对于事件，如果符合您的条件，则需要返回false（反之亦然）：

这是jQueryUI版本，它在$（）.droppable函数中有一个内置的accept选项-它也接受选择器。这个例子与上面的相反。上面的示例将允许您移动badDiv之外的任何位置，而下面的示例将不允许您移动定义的Dropable之外的任何位置：

脚本：

$("#drag1, #drag2").draggable({
          revert:   'invalid'
 });
$("#drop").droppable({
    accept: '#drag1',
    drop: function(event, ui) {
          // whatever happens on drop
    }
});

html:

这将创建一个大的可拖放区域，但它只接受drag1的可拖放ID。要看到这种效果，您还需要在Dragable for revert中使用该选项。在这种情况下，我将其设置为无效，因此，如果放置无效，则可拖动设备将滑回其原始位置

我不确定你的具体应用，但也许这将为你指明你努力实现的正确方向

---

我相信sorttables使用了类似的设置，但在附加div和调整表方面有更多功能。

您可以通过这种方式分配有效的放置目标选择器

$('.drag').drag(function( event, dd ){
     // move the dragged element
},{ drop:'#drop1' }); // assign drop selector 

您还可以返回一些drop事件处理程序“false”

---

看起来您需要jQueryUI的可排序性；请注意，问题是关于jQuery pluins[event.drag][1]和[event.drop][2]，而不是关于jQuery UI draggable/dropable[1]：[2]：没错，忘记在顶部添加免责声明了。。。现在编辑。

<div id="drop" style="width:300px;height:300px;background:blue"></div>
<div id="drag1" style="width:50px;height:50px;background:green"></div>
<div id="drag2" style="width:50px;height:50px;background:yellow"></div>

$('.drag').drag(function( event, dd ){
     // move the dragged element
},{ drop:'#drop1' }); // assign drop selector 

$('.drop').bind('dropinit drop',function( event, dd ){
    if ( $( dd.drag ).is('#drag1') )
        return false;
});