Jquery 可拖放元素首选项（固定导航栏）

我已经修复了bs4导航栏和它下面的一堆div。由于在这些div和navbar之间拖动元素，所有这些div（包括navbar）都是可拖放的。如果元素是从div拖出的，我想优先选择navbar

让我试着举例说明：

让我们从导航栏中拖动元素，向下滚动一点，然后将元素拖回导航栏。元素将下降到导航栏下的div，而不是导航栏

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light nav">           
    <div id="launchPad" class="pull-right">
       <div id="zarazka" style="cursor:move; z-index:1031;">
          <h6 class="h5">Zarážka</h6>          
       </div>
    </div>
</nav>     
<div id="zpravy" class="pb-3">
    <div class="row"><div class="col-12"><div class="zprava" id="1">asdasd</div></div></div>
    <div class="row"><div class="col-12"><div class="zprava" id="2">asdasd</div></div></div>
    <div class="row"><div class="col-12"><div class="zprava" id="3">asdasd</div></div></div>
    <div class="row"><div class="col-12"><div class="zprava" id="4">asdasd</div></div></div>
    <div class="row"><div class="col-12"><div class="zprava" id="5">asdasd</div></div></div>
</div>

$("nav").droppable({
    tolerance: "pointer",
    addClasses: false,                                                    
    drop: function(event, ui) { $("#launchPad").append($(ui.draggable)); }
}); 

$("#zpravy .row").droppable({
    tolerance: "pointer",
    addClasses: false,
    drop: function(event, ui) {        
        $(this).after($(ui.draggable));        
    }
});

$("#zarazka").draggable({
    cursor: "move",
    helper: 'clone',
    revert: "invalid",
    opacity: 0.5,
    zIndex: 1031,
    scroll:false,
    containment: "body"   
});   

扎拉日卡
asdasd
asdasd
asdasd
asdasd
asdasd
$（“nav”）。可拖放({
公差：“指针”，
addClasses:false，
drop:function（event，ui）{$（“#launchPad”）.append（$（ui.draggable））；}
}); 
$（“#zpravy.row”）。可拖放({
公差：“指针”，
addClasses:false，
drop:函数（事件，ui）{
$（this.after（$（ui.draggable））；
}
});
美元（“#zarazka”）。可拖动({
光标：“移动”，
助手：“克隆”，
回复：“无效”，
不透明度：0.5，
zIndex:1031，
卷轴：错，
遏制：“身体”
});   

我认为问题在于您的

导航定位为固定导航，因此它始终位于页面顶部。当你拖动你的元素时，实际上在
nav
后面有一些
div
，因此当你把一些东西放在看起来是
nav
的东西上时，它被放在
div
后面

如果您为
nav
设置了
高度
，并使用
填充顶部
将其余内容包装在
div
中，该顶部等于
nav
的
高度
，则
nav
后面不会有任何内容，也不会出现混淆

由于这是“死区”（它将始终隐藏在
固定的
）后面），因此您应该这样做，因为如果不这样做，您将继续丢失
nav
后面的内容

我将主要内容包装在
中，并添加了以下CSS：

nav {
  min-height: 50px;
}

.main-content {
  margin-top: 50px;
}

如果这对你不起作用，请告诉我


演示

$（“nav”）.可拖放({
公差：“指针”，
addClasses:false，
drop：函数（事件、用户界面）{
$（“#启动板”）.append（$（ui.draggable））；
}
});
$（“#zpravy.row”）。可拖放({
公差：“指针”，
addClasses:false，
drop：函数（事件、用户界面）{
$（this.after（$（ui.draggable））；
}
});
美元（“#zarazka”）。可拖动({
光标：“移动”，
助手：“克隆”，
回复：“无效”，
不透明度：0.5，
zIndex:1031，
卷轴：错，
遏制：“身体”
});
nav{
高度：50px；
}
.主要内容{
填充顶部：50px；
}

扎拉日卡
asdasd
asdasd
asdasd
asdasd
asdasd
问题的关键在于抵消。当文档向下滚动时，可拖动文件落在可拖放位置之外。您可以通过查看偏移位置来欺骗它，如果阻力偏移为50px或更小，则将其附加到
nav


$（函数（）{
var over=假；
$（“.navbar”）.droppable({
公差：“指针”，
addClasses:false，
drop：函数（事件、用户界面）{
log（“导航放置：将拖动附加到启动板上。”）；
$（“#启动板”）.append（$（ui.draggable））；
}
});
$（“#zpravy.row”）。可拖放({
公差：“指针”，
addClasses:false，
drop：函数（事件、用户界面）{
如果（超过）{
log（“行放置：将拖动附加到启动板”）；
ui.draggable.appendTo（$（“#启动板”）；
}否则{
log（“行拖放：在此之后追加拖动”）；
$（this.after（$（ui.draggable））；
}
}
});
美元（“#zarazka”）。可拖动({
光标：“移动”，
助手：“克隆”，
回复：“无效”，
不透明度：0.5，
zIndex:1032，
卷轴：错，
遏制：“身体”，
拖动：函数（e、ui）{
如果（e.clientY<50）{
log（“拖动：设置为true”）；
过度=正确；
}否则{
过度=错误；
}
},
停止：功能（e、ui）{
如果（e.clientY<50）{
log（“dragstop:过度设置为true”）；
过度=正确；
}
}
});
});
.navbar{
最小高度：50px；
z指数：1031；
}
.主要内容{
填充顶部：50px；
}
.行{
高度：40px；
}

扎拉日卡
Lorem ipsum dolor sit amet，是一位杰出的献身者。
不动产或不动产时，坐位为斜方骨陷窝。
不动产或不动产时，坐位为斜方骨陷窝。
这是一个有尊严的人。
elit semper Comodo的库拉比图尔·因特杜姆·莫里斯。
Lorem ipsum dolor sit amet，是一位杰出的献身者。
这里的逻辑不清楚。向下拖动后，是否希望用户将其拖回以删除该项目？为什么不用删除按钮？如果他们真的需要将其拖回起点，我认为您需要增加helpers
z-index
或检查
堆栈
选项。非常感谢您的帖子，但这不起作用。以上的解决方案有效。非常感谢。它的工作，并帮助了很多！