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

Posted 2023-05-08

技术标签:

【中文标题】可放置元素首选项（固定导航栏）【英文标题】：Droppable element preference (fixed navbar) 【发布时间】：2019-05-24 21:31:50 【问题描述】：

我已经修复了 bs4 导航栏和下面的一堆 div。所有这些 div 包括导航栏都是可放置的，因为在这些 div 和导航栏之间拖动元素。如果从 div 拖动元素，我想优先使用导航栏。

让我试着举例说明：

让我们从导航栏拖动元素，向下滚动一点，然后将元素拖回导航栏。元素将下降到导航栏而不是导航栏下的 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"   
);

【问题讨论】：

这里的逻辑不清楚。向下拖动后，您是否希望用户将其拖回以删除该项目？为什么不是删除按钮？如果他们确实需要将其拖回起点，我认为您需要增加助手z-index 或检查stack 选项。 【参考方案1】：

问题的症结在于偏移量。当文档向下滚动时，可拖动对象将落在可放置位置之外。您可以通过查看偏移位置来欺骗它，如果拖动偏移 50px 或更小，则将其附加到 nav。

$(function() 
  var over = false;

  $(".navbar").droppable(
    tolerance: "pointer",
    addClasses: false,
    drop: function(event, ui) 
      console.log("Nav Drop: Append Drag to LaunchPad.");
      $("#launchPad").append($(ui.draggable));
    
  );

  $("#zpravy .row").droppable(
    tolerance: "pointer",
    addClasses: false,
    drop: function(event, ui) 
      if (over) 
        console.log("Row Drop: Append Drag to LaunchPad.");
        ui.draggable.appendTo($("#launchPad"));
       else 
        console.log("Row Drop: Append Drag after this.");
        $(this).after($(ui.draggable));
      
    
  );

  $("#zarazka").draggable(
    cursor: "move",
    helper: 'clone',
    revert: "invalid",
    opacity: 0.5,
    zIndex: 1032,
    scroll: false,
    containment: "body",
    drag: function(e, ui) 
      if (e.clientY < 50) 
        console.log("drag: Over set to true");
        over = true;
       else 
        over = false;
      
    ,
    stop: function(e, ui) 
      if (e.clientY < 50) 
        console.log("dragstop: Over set to true");
        over = true;
      
    
  );
);

.navbar 
  min-height: 50px;
  z-index: 1031;


.main-content 
  padding-top: 50px;


.row 
  height: 40px;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js
"></script>

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light nav">
  <div class="logo">
  </div>
  <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 class="main-content">
  <div id="zpravy" class="pb-3">
    <div class="row">
      <div class="col-12">
        <div class="zprava" id="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="zprava" id="2">Nullam ornare ex ac sem tempus, sit amet facilisis lacus rhoncus.</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="zprava" id="3">Nullam ornare ex ac sem tempus, sit amet facilisis lacus rhoncus.</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="zprava" id="4">Sed volutpat nulla a iaculis dignissim.</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="zprava" id="5">Curabitur interdum mauris at elit semper commodo.</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="zprava" id="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </div>
    </div>
  </div>
</div>

也许不是最好的解决方案，但它直到帮助。根据一些研究，更好的解决方案是不使用固定位置。您可以考虑做一些其他的事情，但它们都将是根据拖放项目将拖动项目附加到行或导航栏的技巧。

希望对您有所帮助。

【讨论】：

非常感谢 Twisty。它的工作原理和帮助很大！【参考方案2】：

我认为问题在于您的nav 定位为固定，因此它始终位于页面顶部。当您拖动元素时，nav 后面实际上有几个 div，因此当您将某些东西放在看似 nav 的东西上时，它被放置在位于其后面的 div 之间。

如果您为您的nav 设置height，并将其余内容包装在div 中，其中padding-top 等于nav 的height，则不会有是nav 后面的任何东西，就不会发生混淆。

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

我已将主要内容包装在 <div class='main-content'></div> 中，并添加了以下 CSS：

nav 
  min-height: 50px;


.main-content 
  margin-top: 50px;

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

演示

$("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"
);

nav 
  height: 50px;


.main-content 
  padding-top: 50px;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js
"></script>

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light nav">
  <div class="logo">

  </div>
  <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 class="main-content">

  <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>

</div>

【讨论】：

非常感谢您的帖子，但这不起作用。上述解决方案有效。

以上是关于可放置元素首选项（固定导航栏）的主要内容，如果未能解决你的问题，请参考以下文章

css 浏览器导航栏如何将按钮平均放置

关于 Bootstrap 4 - 导航栏顶部放置

在bootstrap中怎么使得导航栏固定在顶部

MUI学习02-顶部导航栏

bootstrap 4下拉菜单导航栏用户首选项“欢迎，用户”

在 NavigationView 前面放置可交互视图隐藏导航栏