Предпочтение сбрасываемого элемента (фиксированная панель навигации)

Question

Я исправил bs4 navbar и кучу дивов под этим.Все эти элементы div, включая navbar, могут быть сброшены из-за перетаскивания элемента между этими элементами div и navbar.Я хотел бы отдать предпочтение navbar, если элемент перетаскивается из div.

Позвольте мне попытаться объяснить на примере:

Давайте перетащим элемент из панели навигации, прокрутите немного вниз, а затем перетащите элемент обратно на панель навигации.Элемент будет помещен в div под панелью навигации вместо navbar.

<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, оно находится между div, лежащим за ним.

Если вы установите height для вашего nav и оберните остальную часть вашего контента в div с padding-top, равным height из nav, тогда не будетбыть чем-то позади nav, и путаница не произойдет.

Поскольку это «мертвое пространство» (оно всегда будет скрыто за fixed nav), вы должны делать это независимо от того, как выбудет продолжать терять содержимое за 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>