<br> 重新排序 div 顺序后元素不起作用答案

【问题标题】：<br> element not working after re-ordering div order<br> 重新排序 div 顺序后元素不起作用
【发布时间】：2017-03-07 16:28:58
【问题描述】：

我正在使用 jQuery 的 .sortable 函数来允许用户拖放 <div> 来重新排序。在每个<div> 上方是一个<br>，它在其上方添加一个空格。

但是，在重新订购 <div> 后，<br> 停止工作 - 空间“缺失”。

JsFiddle：https://jsfiddle.net/1Ln5zzvh/

$(document).ready(function() {
  $('#sortable').sortable({
    axis: 'y',
  });
});

div#container {
  border: 1px solid;
  padding: 10px;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="sortable">
  <br>
  <div id="container">
    helloooooooooooooooooooo
  </div>
  <br>
  <div id="container">
    helloooooooooooooooooooo
  </div>
  <br>
  <div id="container">
    helloooooooooooooooooooo
  </div>
</div>

重新订购前：

重新订购后：

【问题讨论】：

为什么不使用边距来代替
？
并使用不同的类！
使用底部边距 10px 代替 br
你只是拖动 div 而不是 br
<br> 确实有效。只是您正在重新排序<div>，而不是<br>

标签： jquery html jquery-ui-sortable

【解决方案1】：

您不应为此目的使用<br> 标签。改用边距。还要确保不要多次使用 id，因为它们应该是唯一的！

但是，因为您只订购 div 而不是 br 标签，所以会出现问题。因此 br 标记最终位于末尾或顶部（基于您拖动的 div）。

$(document).ready(function() {
  $('#sortable').sortable({
    axis: 'y',
  });
});

div.container {
  border: 1px solid;
  padding: 10px;
}

/* Selects every div.container that are preceded by a div.container element */
div.container ~ div.container {
    margin-top: 5px;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="sortable">
  <div class="container">
    helloooooooooooooooooooo
  </div>
  <div class="container">
    helloooooooooooooooooooo
  </div>
  <div class="container">
    helloooooooooooooooooooo
  </div>
</div>

【讨论】：

【解决方案2】：

使用margin 而不是<br> updated fiddle

【讨论】：