演示

Question

我已经修复了bs4导航栏和一堆div。由于div和navbar之间的元素拖动，所有这些div（包括导航栏）都是可放置的。如果要从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"   
});

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

也许不是最好的解决方案，但直到获得帮助为止。根据一些研究，更好的解决方案是不使用固定位置。您可以看一下做其他事情，但是这些都是将把拖动项添加到行或基于放置项的导航栏的技巧。

希望有帮助。

Answer 2

我认为问题在于您的nav位置固定，因此始终位于页面顶部。当您在周围拖动元素时，实际上在div后面有一些nav，因此当您在看起来nav的地方放东西时，它放在{{1}之间}躺在它后面。

如果您为div设置了height，并用等于{{1}的nav将其余内容包装在div中padding-top中的}，则height后面将没有任何内容，也不会发生混乱。

由于这是“死区”（它将始终隐藏在nav nav后面），因此无论如何都应这样做，因为如果出现以下情况，您将继续丢失fixed后面的内容你没有。

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

nav

让我知道这是否对您不起作用

演示

<div class='main-content'></div>

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"
});

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

2 个答案:

演示